Difference between revisions of "ElectroBlocks-archive-sept-2025/C2/Traffic-Lights/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(One intermediate revision by the same user not shown)
Line 7: Line 7:
  
  
−
{| style="border-spacing:0;"
+
{| border=1
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Visual Cue'''
+
||'''Visual Cue'''
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Narration'''
+
||'''Narration'''
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Slide 1'''
+
||'''Slide 1'''
  
 
'''Title slide'''
 
'''Title slide'''
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Welcome to the Spoken Tutorial on '''Traffic Lights''' using '''Electroblocks'''.
+
||Welcome to the Spoken Tutorial on '''Traffic Lights''' using '''Electroblocks'''.
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Slide 2'''
+
||'''Slide 2'''
  
 
'''Learning Objectives'''
 
'''Learning Objectives'''
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| In this tutorial, we will learn how to,
+
||In this tutorial, we will learn how to,
  
 
# Build a set of blocks to create a Traffic Light project
 
# Build a set of blocks to create a Traffic Light project
 
# Check the output of the experiment using the simulator
 
# Check the output of the experiment using the simulator
 
# Upload the Arduino code on Arduino Uno Board.
 
# Upload the Arduino code on Arduino Uno Board.
−
 
  
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Slide 3'''
+
||'''Slide 3'''
  
 
'''System Requirements'''
 
'''System Requirements'''
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| To record this tutorial, I am using:
+
||To record this tutorial, I am using:
  
 
* Ubuntu Linux OS version 22.04
 
* Ubuntu Linux OS version 22.04
Line 41: Line 40:
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Slide 4'''
+
||'''Slide 4'''
  
 
'''Prerequisite'''
 
'''Prerequisite'''
Line 47: Line 46:
  
 
'''https://spoken-tutorial.org'''
 
'''https://spoken-tutorial.org'''
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| To follow this tutorial,  
+
||To follow this tutorial,  
  
−
* Learner should have a basic knowledge of Electroblocks interface  
+
* Learner should have a basic knowledge of '''Electroblocks''' interface  
 
* If not, please visit the relevant tutorials on this website.
 
* If not, please visit the relevant tutorials on this website.
−
 
−
 
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Type [https://electroblocks.org/ https://electroblocks.org/] '''
+
||Type [https://electroblocks.org/ https://electroblocks.org/] '''
  
 
Highlight the link in the search tab
 
Highlight the link in the search tab
Line 61: Line 58:
  
 
[https://electroblocks.org/ https://electroblocks.org/]
 
[https://electroblocks.org/ https://electroblocks.org/]
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Let us open the '''Electroblocks''' '''platform''' using '''Google Chrome browser. '''
+
||Let us open the '''Electroblocks''' platform using '''Google Chrome browser. '''
  
  
Line 67: Line 64:
  
  
−
You will see the default Blink '''LED''' circuit on the screen.
+
You will see the default ''' Blink LED''' circuit on the screen.
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Click on the''' New File '''icon.
+
||Click on the''' New File '''icon.
  
  
Line 77: Line 74:
  
 
Click the '''OK''' button.
 
Click the '''OK''' button.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Click on the '''New File/Blank file''' option available on the toolbar.
+
||Click on the '''New File/Blank file''' option available on the toolbar.
  
  
Line 85: Line 82:
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Point to the number 3 in the loop block.
+
||Point to the number 3 in the loop block.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Observe the loop block in the working area.
+
||Observe the loop block in the working area.
−
 
+
  
 
It indicates that the simulation will run for 3 times.
 
It indicates that the simulation will run for 3 times.
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Point to 3.
+
||Point to 3.
  
  
 
Click to change the number from 2 to 3.
 
Click to change the number from 2 to 3.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Let us change the number to 2.  
+
||Let us change the number to 2.  
  
  
Line 102: Line 98:
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Add the entire Output video.mp4 in the main video at the 1:32 timestamp.
+
||Add the entire Output video.mp4 in the main video at the 1:32 timestamp.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| We will create this '''traffic light''' output.
+
 
 +
||We will create this '''traffic light''' output.
  
  
−
Let’s start by building '''traffic lights''' using '''Electroblocks'''.
+
Let’s get started by building '''traffic lights''' using '''Electroblocks'''.
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Main Video.mp4
+
||Main Video.mp4
  
  
Line 118: Line 115:
  
  
−
 
+
||We need three '''LED''' blocks with different colours, namely, red, orange and green.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| We need three '''LED''' blocks with different colours, namely, red, orange and green.
+
  
  
Line 129: Line 125:
  
 
Click on the '''LED''' option, you will see two blocks.
 
Click on the '''LED''' option, you will see two blocks.
−
 
−
 
  
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Click on the Turn '''LED''' '''block''' and drag it in the working area.
+
||Click on the Turn '''LED''' '''block''' and drag it in the working area.
  
  
Line 141: Line 135:
  
 
Point to the '''LED'''.
 
Point to the '''LED'''.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Click and place the '''Turn LED''' block inside the loop block.
+
||Click and place the '''Turn LED''' block inside the loop block.
  
  
Line 148: Line 142:
  
 
You can see an '''LED''' connected to the '''arduino'''.
 
You can see an '''LED''' connected to the '''arduino'''.
−
 
−
 
−
 
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Zoom in to show the resistor
+
||Zoom in to show the resistor
  
  
Line 159: Line 150:
  
  
−
 
+
||Let us Zoom in to see the circuit connection clearly.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Let us Zoom in to see the circuit connection clearly.
+
  
  
Line 166: Line 156:
  
  
−
By default, the '''LED''' is always connected to pin 2 of''' Arduino'''.
+
By default, the '''LED''' is always connected to pin 2 of ''' Arduino'''.
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Change the''' LED pin '''and '''LED''' colour
+
||Change the''' LED pin '''and '''LED''' colour
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Change the '''pin''' number to '''pin 12'''.
+
||Change the '''pin''' number to '''pin 12'''.
−
 
+
−
 
+
−
Click on the colour section on the '''LED''' '''block''' and select the green colour.
+
−
 
+
  
  
 +
Click on the colour section on the '''LED block''' and select the green colour.
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Only narration
+
||Only narration
  
  
Line 195: Line 182:
  
 
Change to 4 seconds
 
Change to 4 seconds
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Let’s make sure that the '''LED''' remains turned '''ON''' for a specific amount of time.
+
||Let’s make sure that the '''LED''' remains turned '''ON''' for a specific amount of time.
  
  
Line 207: Line 194:
  
  
−
Change the time to '''4 seconds''' in the block as shown.
+
Change the time to 4 seconds in the block as shown.
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Only narration
+
||Only narration
  
  
Line 217: Line 204:
  
  
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Let’s turn '''OFF''' the green '''LED'''.
+
||Let’s turn '''OFF''' the green '''LED'''.
  
  
Line 226: Line 213:
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Point to '''Duplicate block '''
+
||Point to '''Duplicate block '''
  
  
Line 236: Line 223:
  
 
Change state of the '''LED'''
 
Change state of the '''LED'''
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Drag and place this block below the '''Wait for 4 seconds''' block.
+
||Drag and place this block below the '''Wait for 4 seconds''' block.
  
  
−
To change the state of the '''LED''', click the dropdown arrow and select OFF.
+
To change the state of the '''LED''', click the drop down arrow and select '''OFF'''.
  
  
 
This block turns OFF the LED connected to pin 12.
 
This block turns OFF the LED connected to pin 12.
−
 
−
 
  
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Duplicate the '''LED block'''
+
||Duplicate the '''LED block'''
  
  
Line 255: Line 240:
  
 
Drag and place this new block below the green colour led block as shown.
 
Drag and place this new block below the green colour led block as shown.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Now, let's add a second''' LED''' block to represent the orange colour.
+
||Now, let's add a second''' LED''' block to represent the orange colour.
  
  
−
Right click on the '''LED '''block and select the '''Duplicate''' option.
+
Right click on the '''LED ''' block and select the '''Duplicate''' option.
  
  
Line 264: Line 249:
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| click on the dropdown arrow and select On.
+
||click on the dropdown arrow and select On.
  
  
Line 271: Line 256:
  
 
Click on the colour section on the LED block and select orange colour.
 
Click on the colour section on the LED block and select orange colour.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| To change the state of the''' LED''', click on the dropdown arrow and select '''ON'''.  
+
 
 +
||To change the state of the ''' LED''', click on drop down arrow and select '''ON'''.  
  
  
−
Click on the pin 12 dropdown menu and change the '''pin''' number to '''pin 11'''.
+
Click on the pin 12 drop down menu and change the '''pin''' number to '''pin 11'''.
  
  
Line 280: Line 266:
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Duplicate the wait for 4 seconds block
+
||Duplicate the wait for 4 seconds block
  
  
Line 287: Line 273:
  
 
Change the time to 1 second.
 
Change the time to 1 second.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Let us keep the orange LED turned ON for 1 second.
+
||Let us keep the orange LED turned ON for 1 second.
  
  
Line 293: Line 279:
  
  
−
Place this block below the LED''' turn ON '''block.
+
Place this block below the LED ''' turn ON '''block.
  
  
Line 299: Line 285:
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Duplicate the''' LED block'''
+
||Duplicate the''' LED block'''
  
  
Line 309: Line 295:
  
 
To change the state of the '''LED''', click on the dropdown arrow and select off.
 
To change the state of the '''LED''', click on the dropdown arrow and select off.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| We will now turn '''OFF''' the orange LED.
 
  
 +
||We will now turn '''OFF''' the orange LED.
  
−
Right click on the Turn LED block and select the '''Duplicate''' option.
+
 
 +
Right click on the Turn LED on and select the '''Duplicate''' option.
  
  
Line 321: Line 308:
  
  
 +
|-
 +
||Highlight the red '''LED''' block setup between the 5:45 to 6:06 timestamp.
  
−
 
+
||Duplicate the previous LED block and place it below the orange LED block.
−
|-
+
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Highlight the red '''LED''' block setup between the 5:45 to 6:06 timestamp
+
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Duplicate''' the previous LED block and place it below the orange LED block.
+
  
  
Line 334: Line 320:
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Only narration
+
||Only narration
  
  
Line 341: Line 327:
  
 
Point the cursor to arduino code
 
Point the cursor to arduino code
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Let us switch to the '''arduino''' '''code''' section.
+
||Let us switch to the '''arduino code''' section.
  
  
Line 347: Line 333:
  
  
−
An '''Arduino''' '''code''' for a traffic light experiment is generated here.
+
An '''Arduino code''' for a traffic light experiment is generated here.
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Point the cursor to arduino code
+
||Point the cursor to arduino code
−
 
+
||The '''LED pin''' connections are defined in the void setup function.
−
 
+
−
 
+
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| The '''LED''' '''pin''' connections are defined in the void setup function.
+
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Point the cursor to arduino code
+
||Point the cursor to arduino code
  
  
 
Highlight '''digitalWrite(12, HIGH)'''
 
Highlight '''digitalWrite(12, HIGH)'''
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| The working of these 3 '''LEDs''' is explained in the void loop function.
+
||The working of these 3 '''LEDs''' is explained in the void loop function.
  
  
−
The '''digitalWrite(12, HIGH)''' command says that the green '''LED''' will be turned ON.
+
The '''digitalWrite(12, HIGH)''' command says that the green '''LED''' has to be turned ON.
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Highlight the '''delay(4000) '''
+
||Highlight the '''delay(4000) '''
−
 
+
||The '''delay(4000)''' line of code makes sure that the green '''LED''' is '''ON''' for 4 seconds.
−
 
+
−
 
+
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| The '''delay(4000)''' line of code makes sure that the green '''LED''' is '''ON''' for 4 seconds.
+
−
 
+
  
 
In the arduino syntax, '''4000 milliseconds''' represent '''4 seconds.'''
 
In the arduino syntax, '''4000 milliseconds''' represent '''4 seconds.'''
−
 
−
 
−
 
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Highlight '''digitalWrite(12, LOW)'''
+
||Highlight '''digitalWrite(12, LOW)'''
  
  
 
Highlight remaining all code
 
Highlight remaining all code
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| The''' digitalWrite(12, LOW)''' command says that the green LED will be turned off.
+
||The''' digitalWrite(12, LOW)''' command says that the green LED has to be turned off.
  
  
 
Similarly, orange and red '''LEDs''' will be turning '''ON''' and turning '''OFF''' after a given interval.
 
Similarly, orange and red '''LEDs''' will be turning '''ON''' and turning '''OFF''' after a given interval.
−
 
−
 
  
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Point to the simulator.
+
||Point to the simulator.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Let’s check the desired results using the '''simulator'''.
+
||Let’s check the desired results using the '''simulator'''.
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Click on '''Home''' page
+
||Click on '''Home''' page
  
  
 
Click on the play button
 
Click on the play button
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Click on the '''Home''' page Option from the toolbar.
+
||Click on the '''Home''' page option from the toolbar.
  
  
Line 407: Line 381:
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Point towards the simulation window.
+
||Point towards the simulation window.
 +
||The visual representation of the simulation shows that:
  
 +
* The green '''LED''' connected to pin 12 turns ON for 4 seconds, then turns OFF.
  
 +
* After that the orange '''LED''' connected to pin 11 turns ON for 1 second, then turns OFF.
  
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| The visual representation of the simulation shows that:
+
* Then the red '''LED ''' connected to pin 10 turns ON for 2 seconds, then turns OFF.
−
 
+
−
* The green '''LED''' turns ON for 4 seconds, then turns OFF.
+
−
* The orange '''LED''' turns ON for 1 second, then turns OFF.
+
−
* The red '''LED '''turns ON for 2 seconds, and turns OFF.
+
−
 
+
−
 
+
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| One by one step
+
||One by one step
  
  
Line 430: Line 401:
  
 
Highlight the '''Loop''' block
 
Highlight the '''Loop''' block
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| To see the simulation in the '''step by step '''manner,
+
||To see the simulation in the '''step by step '''manner,
  
  
Line 442: Line 413:
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Only narration  
+
||Only narration  
  
 
Click on the '''Download''' icon
 
Click on the '''Download''' icon
Line 450: Line 421:
  
  
−
 
+
||Let us now '''download''' the project in our system.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Let us now '''download''' the project in our system.
+
  
  
Line 458: Line 428:
  
 
Then, select the '''Download Project''' option.
 
Then, select the '''Download Project''' option.
−
 
−
 
  
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Select the directory
+
||Select the directory
  
  
Line 469: Line 437:
  
  
−
 
+
||Select a directory and save the project with the filename '''Traffic Light'''.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Select a directory and save the project with the filename '''Traffic Light'''.
+
  
 
Click on the '''Home''' icon.
 
Click on the '''Home''' icon.
Line 476: Line 443:
  
 
Now let us see how to execute the same traffic light experiment on the hardware.
 
Now let us see how to execute the same traffic light experiment on the hardware.
−
 
−
 
  
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Slide 5'''
+
||'''Slide 5'''
  
  
 
'''Hardware Requirements'''
 
'''Hardware Requirements'''
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| To perform this experiment, we require
+
||To perform this experiment, we require
  
 
* 3 '''LEDs''' (red, green, orange)
 
* 3 '''LEDs''' (red, green, orange)
Line 491: Line 456:
 
* '''Arduino Uno'''
 
* '''Arduino Uno'''
 
* '''Arduino '''cable
 
* '''Arduino '''cable
−
* '''Breadboard '''and''' '''connecting''' wires'''
+
* '''Breadboard '''and '''connecting wires'''
−
 
+
  
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Slide 6'''
+
||'''Slide 6'''
  
  
 
'''Circuit Diagram.png'''
 
'''Circuit Diagram.png'''
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Please refer to this '''circuit diagram''' to make the circuit connections.
+
||Please refer to this '''circuit diagram''' to make the circuit connections.
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Add image
+
||Add image
  
  
 
Text box  
 
Text box  
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Connect the '''arduino''' to your system with an '''arduino''' cable.
+
||Connect the '''arduino''' to your system with an '''arduino''' cable.
  
  
 
Windows users can go directly to the '''electroblocks''' and '''upload''' the code.
 
Windows users can go directly to the '''electroblocks''' and '''upload''' the code.
−
 
−
 
  
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Setup for '''Ubuntu''' users only.
+
||Setup for '''Ubuntu''' users only.
  
  
Line 534: Line 496:
  
  
−
 
+
||For '''Ubuntu '''users, please follow the steps mentioned below.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| For '''Ubuntu '''users, please follow the steps mentioned below.
+
  
  
Line 554: Line 515:
  
 
Type the '''password''' and press '''Enter'''.
 
Type the '''password''' and press '''Enter'''.
−
 
−
 
−
 
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Type sudo chmod -R 775 /dev/ttyACM0
+
||Type sudo chmod -R 775 /dev/ttyACM0
  
  
Line 575: Line 533:
  
 
Go to the electroblocks website and click on the upload button.
 
Go to the electroblocks website and click on the upload button.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Then type,
+
||Then type,
  
  
Line 587: Line 545:
  
  
−
This command initiates the communication between '''Electroblocks''' '''website''' and '''arduino board.'''
+
This command initiates the communication between '''Electroblocks website''' and '''arduino board.'''
  
  
−
If an error occurs, go back to the '''electroblocks''' website and click on the '''Upload''' '''button'''.
+
If an error occurs, go back to the '''electroblocks''' website and click on the '''Upload button'''.
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Click on the upload code button and check the arduino USB port name.
+
||Click on the upload code button and check the arduino USB port name.
  
−
 
+
||Click on the''' upload code button''' and check the '''arduino USB''' '''port''' name.
−
 
+
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Click on the''' upload code button''' and check the '''arduino USB''' '''port''' name.
+
  
  
Line 606: Line 562:
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Restart the system
+
||Restart the system
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| We have to '''restart''' the system to save these changes.
+
||We have to '''restart''' the system to save these changes.
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Open the '''electroblocks''' website.
+
||Open the '''electroblocks''' website.
  
  
Line 632: Line 588:
  
 
Point to''' traffic light project.'''
 
Point to''' traffic light project.'''
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Open the '''electroblocks''' website again.
+
||Open the '''electroblocks''' website again.
  
  
Line 647: Line 603:
  
  
−
A pop-window appears on the screen to confirm if you want to open a new file.
+
A pop-window will appear on the screen to confirm if you want to open a new file.
  
  
Line 653: Line 609:
  
  
−
The '''Traffic light project '''appears on the screen.
+
The '''Traffic light project ''' appears on the screen.
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Only narration
+
||Only narration
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Let’s '''upload''' this '''code''' on the '''arduino''' '''uno''' to perform the same experiment with hardware.
+
||Let’s '''upload''' this '''code''' on the '''arduino uno''' to perform the same experiment with hardware.
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Click on the '''Upload''' code option on the right hand side of your screen.  
+
||Click on the '''Upload''' code option on the right hand side of your screen.  
  
  
Line 669: Line 625:
  
  
−
 
+
||Click on the '''Upload''' button on the toolbar.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Click on the '''Upload''' button on the toolbar.
+
  
  
Line 682: Line 637:
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Point to''' Good Job '''message on the screen.
+
||Point to''' Good Job '''message on the screen.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| It will take a few seconds to connect the '''arduino board '''to the system.
+
||It will take a few seconds to connect the '''arduino board ''' to the system.
  
  
Line 690: Line 645:
  
 
It indicates that '''arduino code''' has been successfully '''uploaded''' on the '''arduino uno'''.
 
It indicates that '''arduino code''' has been successfully '''uploaded''' on the '''arduino uno'''.
−
 
−
 
  
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Add the entire Output video.mp4 in the main video at the 13:54 timestamp.
+
||Add the entire Output video.mp4 in the main video at the 13:54 timestamp.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Notice that the '''LED'''s are turning''' ON''' and turning''' OFF.'''  
+
||Notice that the '''LED'''s are turning''' ON''' and turning''' OFF.'''  
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Slide 7'''
+
||'''Slide 7'''
  
  
Line 712: Line 665:
  
  
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| This brings us to the end of this tutorial.
+
||This brings us to the end of this tutorial.
  
  
Line 718: Line 671:
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Slide 8'''
+
||'''Slide 8'''
  
  
Line 737: Line 690:
  
  
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| As an '''assignment''', please do the following,Connect
+
||As an '''assignment''', please do the following, Connect
  
 
* A green '''LED''' to pin 3,
 
* A green '''LED''' to pin 3,
Line 744: Line 697:
  
 
Adjust the delay times as follows:
 
Adjust the delay times as follows:
−
 
−
 
  
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Add the entire assignment video.mp4 in the main video at the 14:46 timestamp.
+
||Add the entire assignment video.mp4 in the main video at the 14:46 timestamp.
−
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Notice the output of the assignment as shown in the video.
+
||Notice the output of the assignment as shown in the video.
  
 
|-
 
|-
−
| style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"| '''Slide 9'''
+
|| '''Slide 9'''
  
  
 
'''Thank you'''
 
'''Thank you'''
−
| style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"| This tutorial has been contributed by''' FOSSEE''' and '''Spoken Tutorial Project''',''' IIT Bombay.'''
+
|| This tutorial has been contributed by''' FOSSEE''' and '''Spoken Tutorial Project''',''' IIT Bombay.'''
  
  

Latest revision as of 12:37, 3 September 2025

Title of the Script: Traffic Lights

Author: Pratik Nemane

Keywords: Electroblocks, arduino board, 220 ohm resistor, LEDs, breadboard, spoken tutorial, video tutorial.


Visual Cue Narration
Slide 1

Title slide

Welcome to the Spoken Tutorial on Traffic Lights using Electroblocks.
Slide 2

Learning Objectives

In this tutorial, we will learn how to,
  1. Build a set of blocks to create a Traffic Light project
  2. Check the output of the experiment using the simulator
  3. Upload the Arduino code on Arduino Uno Board.


Slide 3

System Requirements

To record this tutorial, I am using:
  • Ubuntu Linux OS version 22.04
  • Google Chrome browser

A working internet connection to use Electroblocks.

Slide 4

Prerequisite


https://spoken-tutorial.org

To follow this tutorial,
  • Learner should have a basic knowledge of Electroblocks interface
  • If not, please visit the relevant tutorials on this website.
Type https://electroblocks.org/

Highlight the link in the search tab


https://electroblocks.org/

Let us open the Electroblocks platform using Google Chrome browser.


In the address bar, type the URL as shown and press Enter.


You will see the default Blink LED circuit on the screen.

Click on the New File icon.


Click on the New File/Blank file option available on the toolbar.


Click the OK button.

Click on the New File/Blank file option available on the toolbar.


A pop-up window appears.

Click the OK button to start a new project.

Point to the number 3 in the loop block. Observe the loop block in the working area.

It indicates that the simulation will run for 3 times.

Point to 3.


Click to change the number from 2 to 3.

Let us change the number to 2.


This will simulate the code for 2 times.

Add the entire Output video.mp4 in the main video at the 1:32 timestamp. We will create this traffic light output.


Let’s get started by building traffic lights using Electroblocks.

Main Video.mp4


Click on the Add-ons menu.


Select LED Option


We need three LED blocks with different colours, namely, red, orange and green.


Click on the Add-ons menu on the left panel.


A new list opens.


Click on the LED option, you will see two blocks.


Click on the Turn LED block and drag it in the working area.


Place the LED option in the loop block.


Point to the LED.

Click and place the Turn LED block inside the loop block.


Notice the change in the circuit on the simulation screen.


You can see an LED connected to the arduino.

Zoom in to show the resistor


Point to pin 2.


Let us Zoom in to see the circuit connection clearly.


Here the LED is connected through a resistor to the Arduino.


By default, the LED is always connected to pin 2 of Arduino.

Change the LED pin and LED colour Change the pin number to pin 12.


Click on the colour section on the LED block and select the green colour.

Only narration


Add the Wait block


Click on the Time.


Drag and drop the Wait block.


Place this block below the LED block.


Change to 4 seconds

Let’s make sure that the LED remains turned ON for a specific amount of time.


For this, we must add a Wait block.


From the left panel, Click on Time.


Drag and place Wait block for 0.2 seconds block below the turn ON LED block.


Change the time to 4 seconds in the block as shown.

Only narration


Duplicate the LED block


Let’s turn OFF the green LED.


Right click on the Turn ON LED block, and select the Duplicate option.


This action creates an identical block in the working area.

Point to Duplicate block


Drag and place this block below the Wait for 4 seconds block.


Click on the dropdown option and select off state.


Change state of the LED

Drag and place this block below the Wait for 4 seconds block.


To change the state of the LED, click the drop down arrow and select OFF.


This block turns OFF the LED connected to pin 12.


Duplicate the LED block


Right click on the LED block and select the Duplicate option.


Drag and place this new block below the green colour led block as shown.

Now, let's add a second LED block to represent the orange colour.


Right click on the LED block and select the Duplicate option.


Drag and place this new block below the green colour led block as shown.

click on the dropdown arrow and select On.


Click on the pin 12 dropdown menu and change the pin number to pin 11.


Click on the colour section on the LED block and select orange colour.

To change the state of the LED, click on drop down arrow and select ON.


Click on the pin 12 drop down menu and change the pin number to pin 11.


Click on the colour section on the LED block and select orange colour.

Duplicate the wait for 4 seconds block


Place this block below the LED turn ON block.


Change the time to 1 second.

Let us keep the orange LED turned ON for 1 second.


For this, duplicate the Wait for 4 seconds block.


Place this block below the LED turn ON block.


Change the time to 1 second as shown.

Duplicate the LED block


Right click on the Turn LED block and select the Duplicate option.


Drag and place this block below the Wait for 1 second block.


To change the state of the LED, click on the dropdown arrow and select off.

We will now turn OFF the orange LED.


Right click on the Turn LED on and select the Duplicate option.


Drag and place this block below the Wait for 1 second block.


Change the state of the LED to OFF.


Highlight the red LED block setup between the 5:45 to 6:06 timestamp. Duplicate the previous LED block and place it below the orange LED block.


Change the pin number to 10 and select RED colour.


Duplicate the Wait block and set the time to 2 seconds.

Only narration


Click on the code icon.


Point the cursor to arduino code

Let us switch to the arduino code section.


Click on the Code icon.


An Arduino code for a traffic light experiment is generated here.

Point the cursor to arduino code The LED pin connections are defined in the void setup function.
Point the cursor to arduino code


Highlight digitalWrite(12, HIGH)

The working of these 3 LEDs is explained in the void loop function.


The digitalWrite(12, HIGH) command says that the green LED has to be turned ON.

Highlight the delay(4000) The delay(4000) line of code makes sure that the green LED is ON for 4 seconds.

In the arduino syntax, 4000 milliseconds represent 4 seconds.

Highlight digitalWrite(12, LOW)


Highlight remaining all code

The digitalWrite(12, LOW) command says that the green LED has to be turned off.


Similarly, orange and red LEDs will be turning ON and turning OFF after a given interval.


Point to the simulator. Let’s check the desired results using the simulator.
Click on Home page


Click on the play button

Click on the Home page option from the toolbar.


Click on the Play button to start the simulation.

Point towards the simulation window. The visual representation of the simulation shows that:
  • The green LED connected to pin 12 turns ON for 4 seconds, then turns OFF.
  • After that the orange LED connected to pin 11 turns ON for 1 second, then turns OFF.
  • Then the red LED connected to pin 10 turns ON for 2 seconds, then turns OFF.
One by one step


Click the Previous Step button


Click on the Next Step button


Highlight the Loop block

To see the simulation in the step by step manner,


Click the Previous Step button to return to the beginning of Step 1.


Click on the Next Step button, notice the blocks in the working area.


The execution state of the block is highlighted with a yellow colour outline.

Only narration

Click on the Download icon


Click on the Download project option.


Let us now download the project in our system.


click on the Download icon.


Then, select the Download Project option.


Select the directory


Click on the Home icon


Select a directory and save the project with the filename Traffic Light.

Click on the Home icon.


Now let us see how to execute the same traffic light experiment on the hardware.


Slide 5


Hardware Requirements

To perform this experiment, we require
  • 3 LEDs (red, green, orange)
  • 3 Resistors (220 Ohms)
  • Arduino Uno
  • Arduino cable
  • Breadboard and connecting wires


Slide 6


Circuit Diagram.png

Please refer to this circuit diagram to make the circuit connections.
Add image


Text box

Connect the arduino to your system with an arduino cable.


Windows users can go directly to the electroblocks and upload the code.


Setup for Ubuntu users only.


Open the terminal


Type sudo usermod -a -G dialout $USER


Enter system password


Press Enter.


Type the password and press Enter.


For Ubuntu users, please follow the steps mentioned below.


Open the terminal.


At the prompt, type:


sudo usermod -a -G dialout $USER


Press Enter.


The system will prompt you to enter the system password.


Type the password and press Enter.

Type sudo chmod -R 775 /dev/ttyACM0


press Enter.


Point to ttyACM0


Point to command


Only narration


Go to the electroblocks website and click on the upload button.

Then type,


sudo chmod -R 775 /dev/ttyACM0(ACMzero)


And press Enter.


ttyACM0 is the arduino usb port.


This command initiates the communication between Electroblocks website and arduino board.


If an error occurs, go back to the electroblocks website and click on the Upload button.

Click on the upload code button and check the arduino USB port name. Click on the upload code button and check the arduino USB port name.


Use the port name and change it accordingly in the sudo command.


You have to run these commands only once.

Restart the system We have to restart the system to save these changes.
Open the electroblocks website.


Only narration


Click on the project icon


Click on the choose file option.


Open the traffic light.xml file


Point to Pop up window


Click on the ok button


Point to traffic light project.

Open the electroblocks website again.


Let us open the Traffic light experiment which we just saved in our system.


Click on the Projects icon on the toolbar.


Click on choose file option.


Open the Traffic Light.xml file.


A pop-window will appear on the screen to confirm if you want to open a new file.


Click on the OK button.


The Traffic light project appears on the screen.

Only narration Let’s upload this code on the arduino uno to perform the same experiment with hardware.
Click on the Upload code option on the right hand side of your screen.


Point to usb port list.


Select the usb port


Click on the Upload button on the toolbar.


Click on the Upload code option on the right hand side of your screen.


A list of available USB port connections will appear.


Select the port to which Arduino is connected and click on Connect button.

Point to Good Job message on the screen. It will take a few seconds to connect the arduino board to the system.


Once it is done, you will see a Good Job message on the screen.


It indicates that arduino code has been successfully uploaded on the arduino uno.


Add the entire Output video.mp4 in the main video at the 13:54 timestamp. Notice that the LEDs are turning ON and turning OFF.
Slide 7


Summary


In this tutorial, we learnt how to

  1. Build a set of blocks to Create a Traffic light project
  2. Check the output of the experiment using the simulator
  3. Upload the arduino code on arduino uno.


This brings us to the end of this tutorial.


Let us summarise.

Slide 8


Assignment


As an assignment, please do the following,Connect

  • A green LED to pin 3,
  • An orange LED to pin 5, and
  • A red LED to pin 6 on the Arduino board.

Adjust the delay times as follows:

  1. Set the delay for the green LED to 6 seconds.
  2. Set the delay for the orange LED to 2 seconds.
  3. Set the delay for the red LED to 3 seconds.


As an assignment, please do the following, Connect
  • A green LED to pin 3,
  • An orange LED to pin 5, and
  • A red LED to pin 6 on the Arduino board.

Adjust the delay times as follows:


Add the entire assignment video.mp4 in the main video at the 14:46 timestamp. Notice the output of the assignment as shown in the video.
Slide 9


Thank you

This tutorial has been contributed by FOSSEE and Spoken Tutorial Project, IIT Bombay.


Thank you for watching.

Contributors and Content Editors

Ketkinaina, Madhurig, Pratiknemane

Retrieved from "https://script.spoken-tutorial.org/index.php?title=ElectroBlocks-archive-sept-2025/C2/Traffic-Lights/English&oldid=57098"