Difference between revisions of "Arduino/C4/Arduino-on-Cloud/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
Line 5: Line 5:
 
|| '''Narration'''
 
|| '''Narration'''
 
|-
 
|-
| style="color:#000000;" | Slide 1:
+
|| Slide 1:
|| <span style="background-color:transparent;color:#000000;">Welcome to the Spoken Tutorial on </span><span style="background-color:transparent;color:#000000;">'''Arduino on </span>C<span style="background-color:transparent;color:#000000;">loud.'''</span>
+
|| Welcome to the Spoken Tutorial on '''Arduino on Cloud.'''
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
|| <div style="color:#000000;">Slide 2:</div>
+
|| Slide 2:
<div style="color:#000000;">Learning Objective</div>
+
Learning Objectives
 
|| In this tutorial, we will learn about  
 
|| In this tutorial, we will learn about  
* <div style="margin-left:1.27cm;margin-right:0cm;"><span style="background-color:transparent;color:#000000;">Arduino on </span>C<span style="background-color:transparent;color:#000000;">loud interface</span></div>
+
* Arduino on Cloud interface
* <div style="margin-left:1.27cm;margin-right:0cm;">How to create circuit connection and</div>
+
* How to create circuit connection and
* <div style="margin-left:1.27cm;margin-right:0cm;"><span style="background-color:transparent;color:#000000;">Simulate to</span><span style="background-color:transparent;"> see the output</span></div>
+
* Simulate to see the output
  
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
|| <div style="color:#000000;">Slide 3:</div>
+
|| Slide 3:
<div style="color:#000000;">Pre-Requisites</div>
+
Pre-Requisites
 
|| To follow this tutorial, you should have a basic knowledge of
 
|| To follow this tutorial, you should have a basic knowledge of
* <div style="margin-left:1.27cm;margin-right:0cm;">Arduino and</div>
+
* Arduino and
* <div style="margin-left:1.27cm;margin-right:0cm;">Electronic components</div>
+
* Electronic components
 
If not, then go through the relevant '''Arduino '''spoken tutorials on this website.
 
If not, then go through the relevant '''Arduino '''spoken tutorials on this website.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
|| <div style="color:#000000;">Slide 4:</div>
+
|| Slide 4:
  
<div style="color:#000000;">System Requirement</div>
+
System Requirement
 
|| To record this tutorial, I am using:
 
|| To record this tutorial, I am using:
* <div style="margin-left:1.27cm;margin-right:0cm;"><span style="background-color:transparent;color:#000000;">'''Ubuntu Linux '''</span><span style="background-color:transparent;color:#000000;">1</span>8<span style="background-color:transparent;color:#000000;">.04 OS</span></div>
+
* '''Ubuntu Linux '''18.04 OS
* <div style="margin-left:1.27cm;margin-right:0cm;">Chrome web browser</div>
+
* Chrome web browser
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
|| Open the browser and go to [https://simulation.iitbx.in/ https://simulation.iitbx.in]<span style="color:#000000;"> </span>
+
|| Open the browser and go to [https://simulation.iitbx.in/ https://simulation.iitbx.in]
 
|| Let us go to '''Arduino on Cloud '''website
 
|| Let us go to '''Arduino on Cloud '''website
* <div style="margin-left:0cm;margin-right:0cm;"><span style="background-color:transparent;color:#000000;">Open the web browser </span>on your<span style="background-color:transparent;color:#000000;"> computer and go to this link.</span></div>
+
* Open the web browser on your computer and go to this link.
* <div style="margin-left:0cm;margin-right:0cm;">Note that an internet connection is required for the entire process.</div>
+
* Note that an internet connection is required for the entire process.
  
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| point to Arduino on cloud
 
|| point to Arduino on cloud
 
+
|| We can see the '''Arduino on Cloud'''on the left hand side of the screen.
|| <span style="color:#000000;">We can </span>see the '''Arduino<span style="color:#000000;"> on Cloud'''</span><span style="color:#000000;"> on the left hand side of </span>the<span style="color:#000000;"> screen.</span>
+
|-
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
 
|| Click on the launch button
 
|| Click on the launch button
 
|| Click on the '''Launch '''button to launch the arduino main page
 
|| Click on the '''Launch '''button to launch the arduino main page
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Point to the video
 
|| Point to the video
 
||  
 
||  
Line 49: Line 48:
  
 
Please watch it and understand the various features available on Arduino on cloud.
 
Please watch it and understand the various features available on Arduino on cloud.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Point to the button
 
|| Point to the button
  
Line 59: Line 58:
 
Click on the three bars on the top left corner to see a list of experiments which are given for you to practice.
 
Click on the three bars on the top left corner to see a list of experiments which are given for you to practice.
  
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Go to the experiment and scroll down in the document
 
|| Go to the experiment and scroll down in the document
 
|| Let us see a demo on the Servo Motor experiment'''.'''
 
|| Let us see a demo on the Servo Motor experiment'''.'''
Line 68: Line 67:
  
 
Refer the '''circuit diagram''' and '''source code''' while practising.
 
Refer the '''circuit diagram''' and '''source code''' while practising.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Switch to the tab
 
|| Switch to the tab
 
|| Let us go back to the Arduino on cloud webpage.
 
|| Let us go back to the Arduino on cloud webpage.
  
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Click on the launch editor
 
|| Click on the launch editor
 
|| Click on the '''Launch Editor''' button to open the interface.
 
|| Click on the '''Launch Editor''' button to open the interface.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Point to the left panel
 
|| Point to the left panel
  
Line 81: Line 80:
 
||  
 
||  
  
<div style="color:#000000;">The components required to create the circuit are available on the left panel.</div>
+
The components required to create the circuit are available on the left panel.
  
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| narration only
 
|| narration only
|| Let's see<span style="background-color:transparent;color:#000000;"> how to create the circuit diagram</span> for servo Motor experiment.
+
|| Let's see how to create the circuit diagram for servo Motor experiment.
  
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| narration only
 
|| narration only
|| <span style="color:#000000;">First we will give a name to this experiment as </span><span style="color:#000000;">'''Servo Motor Control'''</span><span style="color:#000000;">.</span>
+
|| First we will give a name to this experiment as '''Servo Motor Control'''.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Point to untitled
 
|| Point to untitled
|| <span style="background-color:transparent;color:#000000;">On the top </span>right<span style="background-color:transparent;color:#000000;">, by default it shows the name as </span><span style="background-color:transparent;color:#000000;">'''untitled'''</span><span style="background-color:transparent;color:#000000;">.</span>
+
|| On the top left, by default it shows the name as '''untitled'''.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Click on the '''untitled''' and edit to '''Servo Motor Control'''.
 
|| Click on the '''untitled''' and edit to '''Servo Motor Control'''.
|| <span style="background-color:transparent;color:#000000;">Click on the </span><span style="background-color:transparent;color:#000000;">'''untitled'''</span><span style="background-color:transparent;color:#000000;"> and edit the name of the experiment to </span><span style="background-color:transparent;color:#000000;">'''Servo Motor Control'''</span><span style="background-color:transparent;color:#000000;">.</span>
+
|| Click on the '''untitled''' and edit the name of the experiment to '''Servo Motor Control'''.
  
 
We need a breadboard, arduino uno, servo motor and potentiometer for this experiment.
 
We need a breadboard, arduino uno, servo motor and potentiometer for this experiment.
  
<span style="background-color:transparent;color:#000000;">Now let us drag and drop the required components</span>.
+
Now let us drag and drop the required components.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| click on the '''General''' section
 
|| click on the '''General''' section
  
 
Drag and drop breadboard
 
Drag and drop breadboard
|| <span style="background-color:transparent;color:#000000;">First click on the </span><span style="background-color:transparent;color:#000000;">'''General'''</span><span style="background-color:transparent;color:#000000;"> section. </span>
+
|| First click on the '''General''' section.  
  
<span style="background-color:transparent;color:#000000;">Select the </span><span style="background-color:transparent;color:#000000;">'''Breadboard'''</span><span style="background-color:transparent;color:#000000;">. Drag and drop it in the working space as shown.</span>
+
Select the '''Breadboard'''. Drag and drop it in the working space as shown.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| drag and drop the''' Arduino UNO '''from the '''Controllers''' tab.
 
|| drag and drop the''' Arduino UNO '''from the '''Controllers''' tab.
 +
|| Next let us drag and drop the''' Arduino UNO''' from the '''Controllers''' section.
  
|| <span style="background-color:transparent;color:#000000;">Next let us drag and drop the</span><span style="background-color:transparent;color:#000000;">''' Arduino UNO'''</span><span style="background-color:transparent;color:#000000;"> from the </span><span style="background-color:transparent;color:#000000;">'''Controllers'''</span><span style="background-color:transparent;color:#000000;"> </span>section.
+
Arrange the breadboard and Arduino side by side as shown here.
 
+
<div style="color:#000000;">Arrange the breadboard and Arduino side by side as shown here.</div>
+
 
   
 
   
 
Use the Plus or Minus icons in the toolbar to zoom in or zoom out as shown.
 
Use the Plus or Minus icons in the toolbar to zoom in or zoom out as shown.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| drag and drop the '''Servo Motor from output '''tab
 
|| drag and drop the '''Servo Motor from output '''tab
  
Line 125: Line 123:
  
 
Click on ok
 
Click on ok
|| <span style="background-color:transparent;color:#000000;">Then from the </span><span style="background-color:transparent;color:#000000;">'''Output'''</span><span style="background-color:transparent;color:#000000;"> </span>section<span style="background-color:transparent;color:#000000;">, drag and drop the </span><span style="background-color:transparent;color:#000000;">'''Servo Motor '''</span><span style="background-color:transparent;color:#000000;">in the working space.</span>
+
|| Then from the '''Output''' section, drag and drop the '''Servo Motor '''in the working space.
  
<span style="background-color:transparent;color:#000000;">If you want to know more about</span> any component<span style="background-color:transparent;color:#000000;">, click on the </span><span style="background-color:transparent;color:#000000;">'''component'''</span><span style="background-color:transparent;color:#000000;">.</span>
+
If you want to know more about any component, click on the '''component'''.
  
<span style="background-color:transparent;color:#000000;">A pop-up window appears on the t</span>op<span style="background-color:transparent;color:#000000;"> right </span>corner.
+
A pop-up window appears on the top right corner.
  
<span style="background-color:transparent;color:#000000;">Now click on the </span><span style="background-color:transparent;color:#000000;">'''View Info'''</span><span style="background-color:transparent;color:#000000;"> </span>button.
+
Now click on the '''View Info''' button.
  
<div style="color:#000000;">The new window will give you some basic information about the particular component.</div>
+
The new window will give you some basic information about the particular component.
  
<span style="background-color:transparent;color:#000000;">Click on </span><span style="background-color:transparent;color:#000000;">'''OK'''</span><span style="background-color:transparent;color:#000000;"> to close this window.</span>
+
Click on '''OK''' to close this window.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| drag and drop the potentiometer from input tab
 
|| drag and drop the potentiometer from input tab
|| <span style="background-color:transparent;">From the </span><span style="background-color:transparent;">'''Input'''</span><span style="background-color:transparent;"> </span>section<span style="background-color:transparent;">, drag and drop the potentiometer </span>on the breadboard as<span style="background-color:transparent;"> shown.</span>
+
|| From the '''Input''' section, drag and drop the potentiometer on the breadboard as shown.
  
Make sure the legs of the potentiometer are attached to the points of the breadboard.<span style="color:#ff0000;"> </span>
+
Make sure the legs of the potentiometer are attached to the points of the breadboard.
  
 
The breadboard point turning red indicates the connection is established.
 
The breadboard point turning red indicates the connection is established.
  
<span style="background-color:transparent;color:#000000;">We have selected all t</span>he<span style="background-color:transparent;color:#000000;"> components required for this experiment.</span>
+
We have selected all the components required for this experiment.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
| style="color:#ff0000;" |  
+
||
| style="color:#000000;" | Next, let us do the circuit connection.
+
|| Next, let us do the circuit connection.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Point to red marked positive rail
 
|| Point to red marked positive rail
  
Line 168: Line 166:
  
 
Likewise, select a box in the negative rail and connect it to the ground (GND) pin of the Arduino Uno.
 
Likewise, select a box in the negative rail and connect it to the ground (GND) pin of the Arduino Uno.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| point to the black wire
 
|| point to the black wire
 
 
 
 
|| By default, the colour of the wire is black whenever created.
 
|| By default, the colour of the wire is black whenever created.
  
 
Let us change the colour of the wire connected between +5V and the breadboard to '''Red.'''
 
Let us change the colour of the wire connected between +5V and the breadboard to '''Red.'''
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| change the color to red
 
|| change the color to red
  
Line 187: Line 182:
  
 
This will help us to make the other component connection simple.
 
This will help us to make the other component connection simple.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| connect the centre pin of potentiometer to A0 on arduino
 
|| connect the centre pin of potentiometer to A0 on arduino
  
Line 194: Line 189:
  
 
Connect the left terminal of the potentiometer to the '''5V'''  
 
Connect the left terminal of the potentiometer to the '''5V'''  
|| Now we will connect the potentiometer to the Arduino Uno.  
+
|| Let us change the colour of + 5V to red.
  
Connect t<span style="background-color:transparent;">he center pin of the </span>p<span style="background-color:transparent;">otentiometer to the </span><span style="background-color:transparent;">'''P</span>in''' <span style="background-color:transparent;">'''A0 '''</span><span style="background-color:transparent;">of the Arduino Uno.</span>
+
Now we will connect the potentiometer to the Arduino Uno.
 +
 
 +
Connect the center pin of the potentiometer to the '''Pin''' '''A0 ''' of the Arduino Uno.
  
 
Let us change the colour of the wire connected to '''Pin A0''' of Arduino to green.
 
Let us change the colour of the wire connected to '''Pin A0''' of Arduino to green.
  
 
Connect the left terminal of the potentiometer to the '''5V''' rail on the breadboard. Change the wire to red.
 
Connect the left terminal of the potentiometer to the '''5V''' rail on the breadboard. Change the wire to red.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Connect the right terminal to the GND rail.
 
|| Connect the right terminal to the GND rail.
 
|| Connect the right terminal to the GND rail.
 
|| Connect the right terminal to the GND rail.
  
 
Let us keep the black colour of the GND pin to the breadboard as it is.
 
Let us keep the black colour of the GND pin to the breadboard as it is.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Connect the '''Signal''' pin of the Servo Motor to '''Pin 9''' of the Arduino Uno.  
 
|| Connect the '''Signal''' pin of the Servo Motor to '''Pin 9''' of the Arduino Uno.  
  
Line 221: Line 218:
  
 
Change the color of the wire as shown for easy identification.
 
Change the color of the wire as shown for easy identification.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| click on the '''Save Temporary''' icon on the top toolbar.  
 
|| click on the '''Save Temporary''' icon on the top toolbar.  
  
Line 231: Line 228:
 
|| It is recommended to save our progress of circuit creation in between.
 
|| It is recommended to save our progress of circuit creation in between.
  
<span style="background-color:transparent;">For this, click on the </span><span style="background-color:transparent;">'''Save Temporary'''</span><span style="background-color:transparent;"> </span>icon<span style="background-color:transparent;"> on the top toolbar. </span>
+
For this, click on the '''Save Temporary''' icon on the top toolbar.  
  
<span style="background-color:transparent;color:#000000;">It will</span><span style="color:#000000;"> save in the browser cache.</span>
+
It will save in the browser cache.
  
<div style="color:#000000;">Note that <span style="background-color:#ffffff;">if you clear the browser cache, all the saved circuits will be lost.</span></div>
+
Note that if you clear the browser cache, all the saved circuits will be lost.
  
<span style="background-color:#ffffff;">To view the saved circuits, in the menu bar click on </span><span style="background-color:#ffffff;">'''Dashboard. '''</span>
+
To view the saved circuits, in the menu bar click on '''Dashboard. '''
  
<span style="background-color:#ffffff;">Click on the </span><span style="background-color:#ffffff;">'''save'''</span><span style="background-color:#ffffff;"> button and then on the </span><span style="background-color:#ffffff;">'''save temporary'''</span><span style="background-color:#ffffff;"> button.</span>
+
Click on the '''save''' button and then on the '''save temporary''' button.
  
<span style="background-color:#ffffff;">Then click on </span><span style="background-color:#ffffff;">'''Temporary Circuits'''</span><span style="background-color:#ffffff;"> in the left pane.</span>
+
Then click on '''Temporary Circuits''' in the left pane.
  
 
We can see the saved circuit.
 
We can see the saved circuit.
Line 247: Line 244:
 
To open the saved circuit, click on it.
 
To open the saved circuit, click on it.
  
<span style="background-color:#ffffff;">In the pop-up window, click on the</span><span style="background-color:#ffffff;">''' Edit circuit'''</span><span style="background-color:#ffffff;"> button.</span>
+
In the pop-up window, click on the''' Edit circuit''' button.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| show the action
 
|| show the action
 
|| Let us make the circuit connection look better.
 
|| Let us make the circuit connection look better.
  
On the toolbar, c<span style="background-color:transparent;">lick on the </span><span style="background-color:transparent;">'''Auto-Arrange Wires'''</span><span style="background-color:transparent;"> </span>icon<span style="background-color:transparent;"> which re-arranges the wires </span>.
+
On the toolbar, click on the '''Auto-Arrange Wires''' icon which re-arranges the wires .
  
 
It will take some time to see the re-arrangement of wires.
 
It will take some time to see the re-arrangement of wires.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
| style="color:#000000;" |  
+
||  
| style="color:#000000;" | Next we will see how to write the code for this experiment.
+
|| Next we will see how to write the code for this experiment.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Click on the '''Code''' icon, on the top left of the toolbar.
 
|| Click on the '''Code''' icon, on the top left of the toolbar.
 +
|| Click on the '''Code'''icon, on the top left of the toolbar.
  
 +
Write the necessary code in the void setup() and void loop() as shown.
  
 
+
Let us copy and paste the required code in the document.
|| <span style="color:#000000;">Click on the </span><span style="color:#000000;">'''Code'''</span><span style="color:#000000;"> </span>icon<span style="color:#000000;">, on the top left of the toolbar.</span>
+
|-
 
+
<span style="background-color:transparent;color:#000000;">Write the n</span>ecessary<span style="background-color:transparent;color:#000000;"> code in the void setup() and void loop() as shown.</span>
+
 
+
Let us copy and paste the required code from the document.
+
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
 
|| Click on the triangle icon  
 
|| Click on the triangle icon  
|| <div style="color:#000000;">Now we will simulate the circuit design to see the output.</div>
+
|| Now we will simulate the circuit design to see the output.
  
<span style="background-color:transparent;color:#000000;">Click on the </span>play<span style="background-color:transparent;color:#000000;"> icon </span><span style="background-color:transparent;color:#000000;">'''Start </span>Simulation '''<span style="background-color:transparent;color:#000000;">on the toolbar.</span>
+
Click on the play icon '''Start Simulation '''on the toolbar.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Point to bottom of the window
 
|| Point to bottom of the window
 
+
|| A serial monitor will appear at the bottom of the screen which shows the simulation is started.  
 
+
 
+
|| <span style="background-color:transparent;color:#000000;">A </span>serial monitor <span style="background-color:transparent;color:#000000;">will appear at the bottom of the screen which shows the simulation </span>is <span style="background-color:transparent;color:#000000;">started. </span>
+
  
 
The compilation text message in green color shows that the code is correct without any errors.
 
The compilation text message in green color shows that the code is correct without any errors.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| narration only
 
|| narration only
 
|| Let us change the '''Potentiometer''' value in the working space to see the output.
 
|| Let us change the '''Potentiometer''' value in the working space to see the output.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Point to various output according to narration
 
|| Point to various output according to narration
  
Line 291: Line 282:
 
|| Click on the brown stick of the potentiometer and rotate it clockwise to change its value.
 
|| Click on the brown stick of the potentiometer and rotate it clockwise to change its value.
  
<div style="color:#000000;">When the value is at the minimum, note that the shaft of the servo motor is at the minimum angle.</div>
+
When the value is at the minimum, note that the shaft of the servo motor is at the minimum angle.
  
<div style="color:#000000;">When we increase the potentiometer value, the shaft of the servo motor starts to rotate. </div>
+
When we increase the potentiometer value, the shaft of the servo motor starts to rotate.  
  
 
Likewise, you can rotate the potentiometer in anticlockwise, and the servo motor reverses its rotation.
 
Likewise, you can rotate the potentiometer in anticlockwise, and the servo motor reverses its rotation.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| point to the output
 
|| point to the output
 
|| At the same time, we can see the corresponding values of potentiometer and servo motor in serial monitor.
 
|| At the same time, we can see the corresponding values of potentiometer and servo motor in serial monitor.
Line 303: Line 294:
  
 
Press the simulation button again to stop the simulation.
 
Press the simulation button again to stop the simulation.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| narration only
 
|| narration only
|| <span style="background-color:transparent;color:#000000;">Let us </span>see some <span style="background-color:transparent;color:#000000;">common mistakes that </span>happen<span style="background-color:transparent;color:#000000;"> when we write the code or in the circuit connection.</span>
+
|| Let us see some common mistakes that happen when we write the code or in the circuit connection.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Change the code
 
|| Change the code
  
 
Highlight while recording
 
Highlight while recording
|| <span style="background-color:transparent;">For example, in the third line of the code we have </span>created a variable<span style="background-color:transparent;"> as </span>'''myServo'''<span style="background-color:transparent;">.</span>
+
|| For example, in the third line of the code we have created a variable as '''myServo'''.
  
Let us c<span style="background-color:transparent;">hange the capital ‘</span>S<span style="background-color:transparent;">’ </span>to a small<span style="background-color:transparent;"> letter ‘</span>s<span style="background-color:transparent;">’</span> and see what happens.
+
Let us change the capital ‘S’ to a small letter ‘s’ and see what happens.
  
 
Note that in the entire rest of the code, we have used capital 'S' in '''myServo''' .
 
Note that in the entire rest of the code, we have used capital 'S' in '''myServo''' .
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Click on the '''Start Simulation''' icon
 
|| Click on the '''Start Simulation''' icon
 
|| Let us compile and check the output.
 
|| Let us compile and check the output.
  
<span style="color:#000000;">Click on the </span><span style="color:#000000;">'''Start Simulat</span>ion'''<span style="color:#000000;"> </span>icon<span style="color:#000000;"> on the toolbar.</span>
+
Click on '''Start Simulation'''iconon the toolbar.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Point to the error
 
|| Point to the error
  
Line 326: Line 317:
  
 
Show the action -change the code, simulate, point to serial monitor
 
Show the action -change the code, simulate, point to serial monitor
|| <span style="background-color:transparent;color:#000000;">The </span>serial monitor<span style="background-color:transparent;color:#000000;"> window at the bottom of the screen shows the text in </span><span style="background-color:transparent;color:#000000;">'''RED'''</span><span style="background-color:transparent;color:#000000;"> colour. </span>
+
|| The serial monitor window at the bottom of the screen shows the text in '''RED''' colour.  
  
<span style="background-color:transparent;color:#000000;">It </span>indicates <span style="background-color:transparent;color:#000000;">that there is an error in the code. This is a case sensitive error. </span>
+
It indicates that there is an error in the code. This is a case sensitive error.  
  
Note that <span style="background-color:transparent;color:#000000;">Arduino codes are case sensitive.</span>
+
Note that Arduino codes are case sensitive.
  
We have to c<span style="background-color:transparent;color:#000000;">orrect the code and compile it again as shown.</span>
+
We have to correct the code and compile it again as shown.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| narration only
 
|| narration only
|| <span style="background-color:transparent;color:#000000;">Let us </span>see another common mistake that happens in the circuit connection<span style="background-color:transparent;color:#000000;">.</span>
+
|| Let us see another common mistake that happens in the circuit connection.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| delete the ground connection.  
 
|| delete the ground connection.  
 
 
|| Assume that we have forgotten to make the potentiometer ground connection while creating the circuit.
 
|| Assume that we have forgotten to make the potentiometer ground connection while creating the circuit.
  
Line 346: Line 336:
  
 
Now let us check the output.
 
Now let us check the output.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Click on the Start Simulation.  
 
|| Click on the Start Simulation.  
|| Click on the '''Start Simulation'''. The code will compile properly and it will show there are no errors.
+
|| Click on the '''Start Simulation'''.  
 +
 
 +
The code will compile properly and it will show there are no errors.
  
 
Let us check the rotation of the servo motor.
 
Let us check the rotation of the servo motor.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| point to the output
 
|| point to the output
 
|| Note that the servo motor is not changing its shaft position as expected.
 
|| Note that the servo motor is not changing its shaft position as expected.
  
 
Hence you have to cross check all the required pins are connected correctly in the circuit.
 
Hence you have to cross check all the required pins are connected correctly in the circuit.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
| style="color:#000000;" |  
+
||  
 
|| Let us see other features available on the interface.
 
|| Let us see other features available on the interface.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Point to Export & Import JSON
 
|| Point to Export & Import JSON
 
|| There are icons to '''Export and Import JSON''' files.
 
|| There are icons to '''Export and Import JSON''' files.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Click on the''' Export JSON file''' icon
 
|| Click on the''' Export JSON file''' icon
  
Line 370: Line 362:
  
 
save the file in downloads folder
 
save the file in downloads folder
|| To download the JSON file of this project, click on the''' Export JSON file''' icon on the top toolbar.  
+
|| To download the JSON file of this project, click on the''' Export JSON file''' on the top toolbar.  
  
 
Let us give '''Servo_motor '''as the filename to save.
 
Let us give '''Servo_motor '''as the filename to save.
Line 377: Line 369:
  
 
Select the path where you want to save the '''JSON''' file and click on the '''save''' button.
 
Select the path where you want to save the '''JSON''' file and click on the '''save''' button.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
||  
 
||  
 
|| Let us try to import this code now.
 
|| Let us try to import this code now.
 
Click on the '''new project''' icon on the toolbar.
 
  
 
Click on the''' Import JSON file''' icon.
 
Click on the''' Import JSON file''' icon.
Line 387: Line 377:
 
Select the '''Servo_motor.json''' file which we saved earlier and click on the open button.
 
Select the '''Servo_motor.json''' file which we saved earlier and click on the open button.
  
<span style="background-color:#ffffff;">We can see the circuit has been imported. Click on the </span><span style="background-color:#ffffff;">'Code' icon. </span>
+
We can see the circuit has been imported. Click on the 'Code' icon.  
  
 
Even the code has been imported successfully.
 
Even the code has been imported successfully.
Line 394: Line 384:
  
 
We can see the imported JSON file is also working properly as expected.
 
We can see the imported JSON file is also working properly as expected.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| '''Download Image'''
 
|| '''Download Image'''
 
|| The''' Download Image '''option allows you to download the circuit design in either SVG, PNG or JPEG format.
 
|| The''' Download Image '''option allows you to download the circuit design in either SVG, PNG or JPEG format.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Show the document page
 
|| Show the document page
 
|| Explore and practice the experiments that are given in this page.
 
|| Explore and practice the experiments that are given in this page.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
||  
 
||  
 
|| This brings us to the end of this tutorial.
 
|| This brings us to the end of this tutorial.
  
 
Let us summarize.
 
Let us summarize.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
 
|| Slide:
 
|| Slide:
  
 
summary
 
summary
 
|| In this tutorial, we learnt about
 
|| In this tutorial, we learnt about
* <div style="margin-left:1.27cm;margin-right:0cm;">Arduino on Cloud interface</div>
+
* Arduino on Cloud interface
* <div style="margin-left:1.27cm;margin-right:0cm;">How to create circuit connection and</div>
+
* How to create circuit connection and
* <div style="margin-left:1.27cm;margin-right:0cm;">Simulate to see the output</div>
+
* Simulate to see the output
  
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
|| <div style="color:#000000;">Slide 9:</div>
+
|| Slide 9:
  
<div style="color:#000000;">About Spoken Tutorial project</div>
+
About Spoken Tutorial project
|| <div style="color:#000000;">The video at the following link summarizes the Spoken Tutorial project.</div>
+
|| The video at the following link summarizes the Spoken Tutorial project.
  
<div style="color:#000000;">Please download and watch it.</div>
+
Please download and watch it.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
| style="color:#000000;" | Slide 10&nbsp;:Spoken Tutorial workshops
+
|| Slide 10&nbsp;:Spoken Tutorial workshops
|| <span style="background-color:transparent;color:#000000;">The&nbsp;</span><span style="background-color:transparent;color:#000000;">'''Spoken Tutorial Project'''</span><span style="background-color:transparent;color:#000000;">&nbsp;Team conducts workshops and gives certificates.</span>
+
|| The&nbsp;'''Spoken Tutorial Project'''&nbsp;Team conducts workshops and gives certificates.
  
<div style="color:#000000;">For more details, please write to us.</div>
+
For more details, please write to us.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
|| <span style="background-color:transparent;color:#000000;">Slide 11:</span> <span style="background-color:transparent;color:#000000;">Forum for specific questions</span>
+
|| Slide 11: Forum for specific questions
| style="color:#000000;" | Please post your timed queries in this forum.
+
|| Please post your timed queries in this forum.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
+
|-
| style="color:#000000;" |  
+
||  
|| <div style="color:#000000;">This tutorial has been contributed by FOSSEE and Spoken Tutorial Project, IIT Bombay.</div>
+
|| This tutorial has been contributed by FOSSEE and Spoken Tutorial Project, IIT Bombay.
  
<span style="background-color:transparent;color:#000000;">Thank</span>s <span style="background-color:transparent;color:#000000;">for watching.</span>
+
Thanks for watching.
 
|-
 
|-
 
|}
 
|}
<div style="color:#000000;margin-left:0cm;margin-right:0cm;"></div>
 

Latest revision as of 17:17, 11 January 2024

Visual Cue Narration
Slide 1: Welcome to the Spoken Tutorial on Arduino on Cloud.
Slide 2:

Learning Objectives

In this tutorial, we will learn about
  • Arduino on Cloud interface
  • How to create circuit connection and
  • Simulate to see the output
Slide 3:

Pre-Requisites

To follow this tutorial, you should have a basic knowledge of
  • Arduino and
  • Electronic components

If not, then go through the relevant Arduino spoken tutorials on this website.

Slide 4:

System Requirement

To record this tutorial, I am using:
  • Ubuntu Linux 18.04 OS
  • Chrome web browser
Open the browser and go to https://simulation.iitbx.in Let us go to Arduino on Cloud website
  • Open the web browser on your computer and go to this link.
  • Note that an internet connection is required for the entire process.
point to Arduino on cloud We can see the Arduino on Cloudon the left hand side of the screen.
Click on the launch button Click on the Launch button to launch the arduino main page
Point to the video

On the left hand side there is a video on how to use arduino on cloud.

Please watch it and understand the various features available on Arduino on cloud.

Point to the button

click and show the document about the experiment

Click on the Explore experiments button below the video.

It takes you to a home page of arduino on cloud.

Click on the three bars on the top left corner to see a list of experiments which are given for you to practice.

Go to the experiment and scroll down in the document Let us see a demo on the Servo Motor experiment.

This experiment shows how to control the rotation of a servo motor using potentiometer.

The details required for the experiment are given in this page.

Refer the circuit diagram and source code while practising.

Switch to the tab Let us go back to the Arduino on cloud webpage.
Click on the launch editor Click on the Launch Editor button to open the interface.
Point to the left panel

Expand and show the input and output

The components required to create the circuit are available on the left panel.

narration only Let's see how to create the circuit diagram for servo Motor experiment.
narration only First we will give a name to this experiment as Servo Motor Control.
Point to untitled On the top left, by default it shows the name as untitled.
Click on the untitled and edit to Servo Motor Control. Click on the untitled and edit the name of the experiment to Servo Motor Control.

We need a breadboard, arduino uno, servo motor and potentiometer for this experiment.

Now let us drag and drop the required components.

click on the General section

Drag and drop breadboard

First click on the General section.

Select the Breadboard. Drag and drop it in the working space as shown.

drag and drop the Arduino UNO from the Controllers tab. Next let us drag and drop the Arduino UNO from the Controllers section.

Arrange the breadboard and Arduino side by side as shown here.

Use the Plus or Minus icons in the toolbar to zoom in or zoom out as shown.

drag and drop the Servo Motor from output tab

click on the servo motor.

click on view info.

Scroll down to show the information

Click on ok

Then from the Output section, drag and drop the Servo Motor in the working space.

If you want to know more about any component, click on the component.

A pop-up window appears on the top right corner.

Now click on the View Info button.

The new window will give you some basic information about the particular component.

Click on OK to close this window.

drag and drop the potentiometer from input tab From the Input section, drag and drop the potentiometer on the breadboard as shown.

Make sure the legs of the potentiometer are attached to the points of the breadboard.

The breadboard point turning red indicates the connection is established.

We have selected all the components required for this experiment.

Next, let us do the circuit connection.
Point to red marked positive rail


drag and make the +ve connection

drag and make the GND connection

The top and bottom of the breadboard has a red-marked positive rail and a blue-marked negative rail.

All the holes in the same row are internally connected.

So you can use any of the holes in the same row for connection.

We will create a +5v source rail on the breadboard.

Select a box in the positive rail of the breadboard as shown.

Then connect it to the +5V pin on the Arduino Uno.

Likewise, select a box in the negative rail and connect it to the ground (GND) pin of the Arduino Uno.

point to the black wire By default, the colour of the wire is black whenever created.

Let us change the colour of the wire connected between +5V and the breadboard to Red.

change the color to red

From the drop down box, select the red colour.

Click on the wire for which the colour has to be changed. A pop up window appears on the top right.

From the drop down box, select the red colour.

Now we will extend the +5V and Ground rails of both top and bottom of the breadboard as shown.

This will help us to make the other component connection simple.

connect the centre pin of potentiometer to A0 on arduino

change the color to green


Connect the left terminal of the potentiometer to the 5V

Let us change the colour of + 5V to red.

Now we will connect the potentiometer to the Arduino Uno.

Connect the center pin of the potentiometer to the Pin A0 of the Arduino Uno.

Let us change the colour of the wire connected to Pin A0 of Arduino to green.

Connect the left terminal of the potentiometer to the 5V rail on the breadboard. Change the wire to red.

Connect the right terminal to the GND rail. Connect the right terminal to the GND rail.

Let us keep the black colour of the GND pin to the breadboard as it is.

Connect the Signal pin of the Servo Motor to Pin 9 of the Arduino Uno.

Connect the power pin of the Servo Motor to +5v rail of the breadboard.

Connect the GND pin of the Servo Motor to the GND rail of the breadboard.

change the color of the wire.

Connect the Signal pin of the Servo Motor to Pin 9 of the Arduino Uno.

Connect the power pin of the Servo Motor to +5v rail of the breadboard.

Connect the GND pin of the Servo Motor to the GND rail of the breadboard.

Change the color of the wire as shown for easy identification.

click on the Save Temporary icon on the top toolbar.


Click on Dashboard


Click on Temporary circuits

It is recommended to save our progress of circuit creation in between.

For this, click on the Save Temporary icon on the top toolbar.

It will save in the browser cache.

Note that if you clear the browser cache, all the saved circuits will be lost.

To view the saved circuits, in the menu bar click on Dashboard.

Click on the save button and then on the save temporary button.

Then click on Temporary Circuits in the left pane.

We can see the saved circuit.

To open the saved circuit, click on it.

In the pop-up window, click on the Edit circuit button.

show the action Let us make the circuit connection look better.

On the toolbar, click on the Auto-Arrange Wires icon which re-arranges the wires .

It will take some time to see the re-arrangement of wires.

Next we will see how to write the code for this experiment.
Click on the Code icon, on the top left of the toolbar. Click on the Codeicon, on the top left of the toolbar.

Write the necessary code in the void setup() and void loop() as shown.

Let us copy and paste the required code in the document.

Click on the triangle icon Now we will simulate the circuit design to see the output.

Click on the play icon Start Simulation on the toolbar.

Point to bottom of the window A serial monitor will appear at the bottom of the screen which shows the simulation is started.

The compilation text message in green color shows that the code is correct without any errors.

narration only Let us change the Potentiometer value in the working space to see the output.
Point to various output according to narration

Show both rotation with potentiometer

Click on the brown stick of the potentiometer and rotate it clockwise to change its value.

When the value is at the minimum, note that the shaft of the servo motor is at the minimum angle.

When we increase the potentiometer value, the shaft of the servo motor starts to rotate.

Likewise, you can rotate the potentiometer in anticlockwise, and the servo motor reverses its rotation.

point to the output At the same time, we can see the corresponding values of potentiometer and servo motor in serial monitor.

Thus we can observe that the servo motor rotates as per the rotation of the potentiometer.

Press the simulation button again to stop the simulation.

narration only Let us see some common mistakes that happen when we write the code or in the circuit connection.
Change the code

Highlight while recording

For example, in the third line of the code we have created a variable as myServo.

Let us change the capital ‘S’ to a small letter ‘s’ and see what happens.

Note that in the entire rest of the code, we have used capital 'S' in myServo .

Click on the Start Simulation icon Let us compile and check the output.

Click on Start Simulationiconon the toolbar.

Point to the error

Correct the code and compile

Show the action -change the code, simulate, point to serial monitor

The serial monitor window at the bottom of the screen shows the text in RED colour.

It indicates that there is an error in the code. This is a case sensitive error.

Note that Arduino codes are case sensitive.

We have to correct the code and compile it again as shown.

narration only Let us see another common mistake that happens in the circuit connection.
delete the ground connection. Assume that we have forgotten to make the potentiometer ground connection while creating the circuit.

Select the ground wire connection and right click and select delete.

Otherwise, press the delete button to delete the ground connection.

Now let us check the output.

Click on the Start Simulation. Click on the Start Simulation.

The code will compile properly and it will show there are no errors.

Let us check the rotation of the servo motor.

point to the output Note that the servo motor is not changing its shaft position as expected.

Hence you have to cross check all the required pins are connected correctly in the circuit.

Let us see other features available on the interface.
Point to Export & Import JSON There are icons to Export and Import JSON files.
Click on the Export JSON file icon

Type servo motor

Click on the Download Project button.

save the file in downloads folder

To download the JSON file of this project, click on the Export JSON file on the top toolbar.

Let us give Servo_motor as the filename to save.

Click on the Download Project button.

Select the path where you want to save the JSON file and click on the save button.

Let us try to import this code now.

Click on the Import JSON file icon.

Select the Servo_motor.json file which we saved earlier and click on the open button.

We can see the circuit has been imported. Click on the 'Code' icon.

Even the code has been imported successfully.

Click on the Start Simulation button and verify the rotation of Servo motor using the potentiometer.

We can see the imported JSON file is also working properly as expected.

Download Image The Download Image option allows you to download the circuit design in either SVG, PNG or JPEG format.
Show the document page Explore and practice the experiments that are given in this page.
This brings us to the end of this tutorial.

Let us summarize.

Slide:

summary

In this tutorial, we learnt about
  • Arduino on Cloud interface
  • How to create circuit connection and
  • Simulate to see the output
Slide 9:

About Spoken Tutorial project

The video at the following link summarizes the Spoken Tutorial project.

Please download and watch it.

Slide 10 :Spoken Tutorial workshops The Spoken Tutorial Project Team conducts workshops and gives certificates.

For more details, please write to us.

Slide 11: Forum for specific questions Please post your timed queries in this forum.
This tutorial has been contributed by FOSSEE and Spoken Tutorial Project, IIT Bombay.

Thanks for watching.

Contributors and Content Editors

Madhurig, Nirmala Venkat