View source for ElectroBlocks-archive-sept-2025/C2/Traffic-Lights/English

Title of the Script: Traffic Lights 

Author: Pratik Nemane

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



{| style="border-spacing:0;"
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Visual Cue'''
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Narration'''

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

'''Title slide'''
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Welcome to the Spoken Tutorial on '''Traffic Lights''' using '''Electroblocks'''.

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Slide 2'''

'''Learning Objectives'''
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| In this tutorial, we will learn how to,

# Build a set of blocks to create a Traffic Light project
# Check the output of the experiment using the simulator
# Upload the Arduino code on Arduino Uno Board.



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

'''System Requirements'''
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| To record this tutorial, I am using:

* Ubuntu Linux OS version 22.04
* Google Chrome browser

A working internet connection to use '''Electroblocks'''. 

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Slide 4'''

'''Prerequisite'''


'''https://spoken-tutorial.org'''
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| To follow this tutorial, 

* Learner should have a basic knowledge of Electroblocks interface 
* 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/] '''

Highlight the link in the search tab


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


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


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/Blank''' file option available on the toolbar.


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.


A pop-up window appears.

Click the '''OK''' button to start a new project.

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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.


It indicates that the simulation will run for 3 times.

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Point 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. 


This will simulate the code for 2 times.

|-
| 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.
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| We will create this '''traffic light''' output.


Let’s start by building '''traffic lights''' using '''Electroblocks'''.

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Main Video.mp4


Click on the '''Add-ons''' menu.


Select '''LED''' Option



| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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.




|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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'''.
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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'''.




|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Zoom in to show the resistor


Point to pin 2.



| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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'''.

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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'''.


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


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


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.

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Only narration


Duplicate the '''LED block'''



| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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.

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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'''
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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.


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


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.
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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.

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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.
| 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'''. 


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.

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Duplicate the wait for 4 seconds block


Place this block below the''' LED turn ON''' block.


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.


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.

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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.
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| We will now turn '''OFF''' the orange LED.


Right click on the Turn LED block 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.




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


Change the '''pin''' number to 10 and select RED colour.


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

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Only narration


Click on the code icon.


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.


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


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



| 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


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 '''digitalWrite(12, HIGH)''' command says that the green '''LED''' will be turned ON.

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Highlight the '''delay(4000) '''



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




|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Highlight '''digitalWrite(12, LOW)'''


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.


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.
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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 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 '''Play''' button to start the simulation.

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Point towards the simulation window.



| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| The visual representation of the simulation shows that:

* 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


Click the '''Previous''' '''Step''' button


Click on the '''Next Step '''button


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,


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. 

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Only narration 

Click on the '''Download''' icon


Click on the '''Download''' '''project''' option.



| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Let us now '''download''' the project in our system.


click on the '''Download''' icon.


Then, select the '''Download Project''' option.




|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Select the directory


Click on the '''Home''' icon



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


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


'''Hardware Requirements'''
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| To perform this experiment, we require

* 3 '''LEDs''' (red, green, orange)
* 3 '''Resistors''' (220 '''Ohms''')
* '''Arduino Uno'''
* '''Arduino '''cable
* '''Breadboard '''and''' '''connecting''' wires'''



|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Slide 6'''


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

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Add image


Text box 
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Connect the '''arduino''' to your system with an '''arduino''' cable.


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.


Open the '''terminal'''


Type '''sudo usermod -a -G dialout $USER'''


Enter system '''password'''


Press '''Enter'''.


Type the password and press Enter.



| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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'''.




|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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.
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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'''.

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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.


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


You have to run these commands only once. 

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Restart the system
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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.


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.'''
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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 appears 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.

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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.

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


Point to usb '''port''' list.


Select the '''usb''' port



| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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.

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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.


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




|-
| 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.
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| Notice that the '''LED'''s are turning''' ON''' and turning''' OFF.''' 

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''Slide 7'''


'''Summary'''


In this tutorial, we learnt how to

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


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


Let us summarise.

|-
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| '''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:

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


| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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:




|-
| 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.
| style="background-color:transparent;border:1pt solid #000000;padding:0.176cm;"| 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'''


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


Thank you for watching.

|}