View source for Arduino/C4/Arduino-on-Cloud/English


{| border="1"
|-
|| '''Visual Cue'''
|| '''Narration'''
|-
| style="color:#000000;" | 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>
|- 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>
<div style="color:#000000;">Learning Objective</div>
|| 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>
* <div style="margin-left:1.27cm;margin-right:0cm;">How to create circuit connection and</div>
* <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>

|- 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>
<div style="color:#000000;">Pre-Requisites</div>
|| To follow this tutorial, you should have a basic knowledge of
* <div style="margin-left:1.27cm;margin-right:0cm;">Arduino and</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">Electronic components</div>
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>

<div style="color:#000000;">System Requirement</div>
|| 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>
* <div style="margin-left:1.27cm;margin-right:0cm;">Chrome web browser</div>
|- 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>
|| Let us go to </span><span style="background-color:transparent;color:#000000;">'''Arduino on Cloud '''</span><span style="background-color:transparent;color:#000000;">web</span>site<span style="background-color:transparent;color:#000000;">.</span></div>
* <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>
* <div style="margin-left:0cm;margin-right:0cm;">Note that an internet connection is required for the entire process.</div>

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

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

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

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.

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

Expand and show the input and output
|| 

<div style="color:#000000;">The components required to create the circuit are available on the left panel.</div>

|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
|| narration only
|| Let's see<span style="background-color:transparent;color:#000000;"> how to create the circuit diagram</span> 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
|| <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>
|- 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
|| <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>
|- 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'''.
|| <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>

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

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>

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

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

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

click on the servo motor.

click on view info.

Scroll down to show the information

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>

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

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

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

<div style="color:#000000;">The new window will give you some basic information about the particular component.</div>

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

Make sure the legs of the potentiometer are attached to the points of the breadboard.<span style="color:#ff0000;"> </span>

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


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



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

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

change the color to green


Connect the left terminal of the potentiometer to the '''5V''' 
|| Now we will connect the potentiometer to the Arduino Uno. 

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>

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

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''' 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 th<span style="color:#0000ff;">e </span><span style="color:#0000ff;">'''Signal'''</span><span style="color:#0000ff;"> pin </span>of the Servo Motor to '''Pin 9''' of the Arduino Uno. 


Connect the<span style="color:#0000ff;">''' power'''</span><span style="color:#0000ff;"> pin</span> of the Servo Motor to +5v rail of the breadboard.

Connect the<span style="color:#0000ff;">''' GND pin'''</span><span style="color:#0000ff;"> </span>of the Servo Motor to the '''GND''' rail of the breadboard.

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 Dashboard


Click on Temporary circuits
|| 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>

<span style="background-color:transparent;color:#000000;">It will</span><span style="color:#000000;"> save in the browser cache.</span>

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

<span style="background-color:#ffffff;">To view the saved circuits, in the menu bar click on </span><span style="background-color:#ffffff;">'''Dashboard. '''</span>

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

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

We can see the saved circuit.

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

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



|| <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 
|| <div style="color:#000000;">Now we will simulate the circuit design to see the output.</div>

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



|| <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.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
|| narration only
|| 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

Show both rotation with potentiometer

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

<div style="color:#000000;">When we increase the potentiometer value, the shaft of the servo motor starts to rotate. </div>

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
|| 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.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
|| 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>
|- 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

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>

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.

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

Correct the code and compile

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>

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

Note that <span style="background-color:transparent;color:#000000;">Arduino codes are case sensitive.</span>

We have to c<span style="background-color:transparent;color:#000000;">orrect the code and compile it again as shown.</span>
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
|| 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>
|- 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. 

|| 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.
|- 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'''. The code will compile properly and it will show there are no errors.

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

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

Click on the '''new project''' icon on the toolbar.

Click on the''' Import JSON file''' icon.

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>

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.
|- style="background-color:transparent;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.191cm;padding-right:0.191cm;"
|| '''Download Image'''
|| 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
|| 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.

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:

summary
|| In this tutorial, we learnt about
* <div style="margin-left:1.27cm;margin-right:0cm;">Arduino on Cloud interface</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">How to create circuit connection and</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">Simulate to see the output</div>

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

<div style="color:#000000;">About Spoken Tutorial project</div>
|| <div style="color:#000000;">The video at the following link summarizes the Spoken Tutorial project.</div>

<div style="color:#000000;">Please download and watch it.</div>
|- 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
|| <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>

<div style="color:#000000;">For more details, please write to us.</div>
|- 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>
| style="color:#000000;" | 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>

<span style="background-color:transparent;color:#000000;">Thank</span>s <span style="background-color:transparent;color:#000000;">for watching.</span>
|-
|}
<div style="color:#000000;margin-left:0cm;margin-right:0cm;"></div>