All About Cloud Class 7
Main User Interface of Google Docs, Sheets and Slides:
Google Docs
Google Sheets
Google Slides
Real-Time Collaboration
Google Drive lets multiple people in different locations collaborate simultaneously on the same file
from any computer with Internet access. When someone is viewing or editing something at the same
time as you, you’ll see a coloured tile with their name in the top right of your screen.
Google Translate:
Google Translate is a free multilingual machine translation service developed by Google,
to translate text. It also offers a website interface for mobile apps for Android and iOS,
and an API that helps developers build browser extensions and software applications.
Google Translate supports over 100 languages at various levels and serves over 500 million people
daily.
To access Google Translate use the URL: https://translate.google.com/ or search on google for
google translate.
Enter the text for Translation Select the Language Switch the Language Switch the Translation
Speak Search / Text Input Hear the text / input Hear the Translation Copy the Translation Share the Translation
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 50 of 95
All About Cloud Class 7
Google Translate Text from Photos:
You can translate text in photos you’ve already taken. You can also take a new photo in the Translate
app and translate text on the new photo.
• On your Android phone or tablet, open
the Translate app
• If needed, pick the languages.
o At the top left, choose Detect
language or the language you
want to translate.
o At the top right, choose a
language you read.
• Tap Camera .
• Tap Scan to take a new photo and translate any text it contains, or tap Import to
choose an existing photo to translate.
• Use your finger to highlight the text you want to translate.
Google Maps:
Google Maps is a Web-based service that provides detailed information about
geographical regions and sites around the world. In addition to conventional road maps,
Google Maps offers aerial and satellite views of many places. In some cities, Google
Maps offers street views comprising photographs taken from vehicles.
Google Maps offers several services as part of the larger Web application, as follows.
• A route planner offers directions for drivers, bikers, walkers, and users of public
transportation who want to take a trip from one specific location to another.
• The Google Maps application program interface (API) makes it possible for Web site
administrators to embed Google Maps into a proprietary site such as a real estate guide or
community service page.
• Google Maps for Mobile offers a location service for motorists that utilizes the Global
Positioning System (GPS) location of the mobile device (if available) along with data from
wireless and cellular networks.
• Google Street View enables users to view and navigate through horizontal and vertical
panoramic street-level images of various cities around the world.
• Supplemental services offer images of the moon, Mars, and the heavens for hobby
astronomers.
Types of Maps
Google Maps provides four types of maps:
• ROADMAP − This is the default type. If you haven't chosen any of the types, this will be
displayed. It shows the street view of the selected region.
• SATELLITE − This is the map type that shows the satellite images of the selected region.
• HYBRID − This map type shows the major streets on satellite images.
• TERRAIN − This is the map type that shows the terrain and vegetation.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 51 of 95
All About Cloud Class 7
To access Google Maps on a desktop, use the URL: https://www.google.com/maps or search on
google for google maps.
Google Maps on Phone:
1. On your Android phone or tablet, open the Google Maps app Google Maps.
2. Search for a place or tap it on the map.
3. In the bottom right, tap Directions. If you touch and hold the button instead, you’ll start
navigation.
4. Optional: To add additional destinations, go to the top right and tap More and then Add
stop. You can add up to 9 stops. When you are finished, tap Done.
5. Choose one of the following:
a. Driving: b. Transit:
c. Walking: d. Ride Services Uber:
e. Cycling:
6. If other routes are available, they will be shown in grey on the map. To follow an alternate
route, tap the grey line.
7. To start navigation, tap Start . If you see “Searching for GPS,” your phone is trying to get a
GPS signal. For example, you might be in or near a tunnel, parking garage, or other location
where there’s no GPS signal.
8. To stop or cancel navigation, go to the bottom left and tap Close.
9. To access google street view click and drag this PEGMAN icon on the yellow road to
activate the google street view.
10. For easy navigation enter simple text Islamabad to Lahore in the search bar.
Places Option:
After selecting anyplace in google maps we can start
navigation by selecting the Directions option, Save
that place, Search Nearby places to that location, send that place to your phone (in case of desktop
usage) and we can also share the location via URL.
Google Coordinates:
Sometimes we need to share the location or place which is not registered in Google maps, in that
case, we can share the coordinates based on the longitude and latitude of the earth to access or
share the location of a certain place or ourselves.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 52 of 95
All About Cloud Class 7
For example, my home is not a public place and I want to share my home location to a childhood
friend who is new in town and does not know the neighbourhood.
• I will open the google maps and locate my house on maps by clicking or manually locate
my house using the nearest landmark.
• Once I clicked on location it will show me a dialogue
box in the bottom with address and coordinates.
33.696413, 73.010523
• I can share these coordinates to anyone to locate a place on the entire planet.
Details on Maps:
In google maps there are several other useful information
about that place is available at the bottom of the left pane like
address, website, phone number, working hours, photos, etc.
We can also contribute to this content by adding photos or
“Suggest an edit” option.
If we scroll down a little more, we can see a public review
option along with the 5-star rating system which describes the
place more in detail.
We can also add our review as per our experience.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 53 of 95
All About Cloud Class 7
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 54 of 95
Programming the Computer (Python) Class 7
Programming the Computer (Python)
Programming the Computer:
Computer programming is a way of giving computers instructions about what they should do next.
These instructions are known as code, and computer programmers write code to solve problems or
perform a task.
The end goal is to create something: that could mean anything from a web page, or a piece of
software, or even just a pretty picture. That’s why computer programming is often described as a
mix of art and science; it’s technical and analytical, yet creative at the same time.
Flowchart and Algorithms:
Algorithms and flowcharts are two different tools used for creating new programs, especially in
computer programming. An algorithm is a step-by-step analysis of the process, while a flowchart
explains the steps of a program in a graphical way.
Algorithms:
To write a logical step-by-step method to solve the problem is called an algorithm. In other words,
an algorithm is a procedure for solving problems. In order to solve a mathematical or computer
problem, this is the first step of the procedure. An algorithm includes calculations, reasoning and
data processing. Algorithms can be presented by natural languages, pseudocode and flowcharts, etc.
Algorithm for making Peanut Butter Sandwich Algorithm for taking valid user information
• Write an algorithm for making Pancake or any process related to your daily routine.
• Write an algorithm for a product purchase through online shopping.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 55 of 95
Programming the Computer (Python) Class 7
Flowchart:
A flowchart is the graphical or pictorial representation of an algorithm with the help of different
symbols, shapes and arrows to demonstrate a process or a program. With algorithms, we can easily
understand a program. The main purpose of a flowchart is to analyse different processes. Several
standard graphics are applied in a flowchart:
Basic Shapes used to make a Flow Chart
Terminal Box - Input / Output Process / Decision Connector /
Start / End Instruction Arrow
The graphics above represent a different part of a flowchart. The process in a flowchart can be
expressed through boxes and arrows with different sizes and colours. In a flowchart, we can easily
highlight a certain element and the relationships between each part.
How to Use Flowcharts to Represent Algorithms
Algorithms are mainly used for mathematical and computer programs, whilst flowcharts can be used
to describe all sorts of processes: business, educational, personal and of course algorithms. So
flowcharts are often used as a program planning tool to visually organize the step-by-step process of
a program. Here are some examples:
Example: Print 1 to 20:
Algorithm: Flowchart:
Step 1: Initialize X as 0,
Step 2: Increment X by 1,
Step 3: Print X,
Step 4: If X is less than 20 then go back to step 2.
Draw a flowchart using the algorithm for a product purchase through online shopping.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 56 of 95
Programming the Computer (Python) Class 7
Pseudocode & Steps to Solution:
Pseudocode
Pseudocode is an informal high-level description of the operating principle of a computer program or
other algorithm. It uses the structural conventions of a normal programming language but is
intended for human reading rather than machine reading. Pseudocode typically omits details that
are essential for machine understanding of the algorithm, such as variable declarations, system-
specific code etc. In simple words, Pseudocode is a precise form of an Algorithm without
unnecessary steps of vocabulary/words.
• Convert the flowchart of making online shopping to pseudocode.
What is a Program?
In computing, a program is a specific set of ordered operations for a computer to perform. In the
modern computer that John von Neumann outlined in 1945, the program contains a one-at-a-time
sequence of instructions that the computer follows.
How a Program Interacts with Hardware?
Hardware is a term we use to describe the electronics and mechanical parts of the computer. To be
able to use it, we need programs, the software. A computer program is a list of instructions stored as
a file on a storage device. If this program is embedded inside a hardware device it is called firmware.
When we run the program, the computer “reads” the list of commands or instructions and does
what the program tells it to do.
Python Programming Language:
Python is a high-level programming language designed to be easy to read and simple to implement.
It is open-source, which means it is free to use, even for commercial applications. Python can run on
Mac, Windows, and Unix systems.
Python is considered a scripting language, like Ruby or Perl and is often used for creating Web
applications and dynamic Web content.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 57 of 95
Programming the Computer (Python) Class 7
There are tens of thousands of famous python websites on the internet, few of them are listed:
• Google • Netflix • Spotify
• Uber • Dropbox • Pinterest
• Reddit • Facebook • Amazon
Python is a Programming language is popular because of its easy syntax. We will start writing some
code in PYTHON IDLE (Integrated Development and Learning Environment).
File menu for
basic operations
like opening,
saving and
printing
programs
Shell Menu to
reset the
environment
Debug to check
your program
from any
errors
Writing a Program in Python:
• Open File menu and select New File or press Ctrl+N.
• Type→ print ("My first program in Python")
• Open File menu and save the program or press Ctrl+S.
• Run the program from the Run menu or press Ctrl+F5.
Program written python Output of Program
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 58 of 95
Programming the Computer (Python) Class 7
Python Indentations:
Where in other programming languages the indentation in code is for readability only, in Python the
indentation is very important. Python uses indentation
to indicate a block of code.
Python will give an error if we skip the indentation:
What are Variables and Data Types:
Variables is a block of memory where we store data. Data can be of any type like text, numbers,
integers, etc. A variable can store values only in one data type either it could be numeric or string.
Python has no command for declaring a variable
Numeric Data Type: This data type is used to hold numeric values like integers, or Float like decimal
numbers.
String Data Type: The string is a sequence of characters like a simple text “Hello World”. Python
supports Unicode characters. Generally, strings are represented by either single or double-quotes.
Python Variables:
In Python variables are created the moment we assign a value to it:
Comments:
Python has the ability to add comments for the purpose of in-code documentation. In other words,
comments are just a dead piece of code which can be used for our references only. Comments start
with a #, and Python will render the rest of the line as a comment:
Creating Variables:
Variables are containers for storing data values. Unlike other programming languages, Python has no
command for declaring a variable. A variable is created the moment we first assign a value to it.
Output of Program
Declaring
variables
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 59 of 95
Programming the Computer (Python) Class 7
Variable Names
A variable can have a short name (like x and y) or a more descriptive name (age, carname, total
volume). Rules for Python variables:
• A variable name must start with a letter or the underscore character
• A variable name cannot start with a number
• A variable name can only contain alpha-numeric characters and underscores(A-z, 0-9, and _ )
• Variable names are case-sensitive (age, Age and AGE are three different variables)
Practice:
1. Open new python file from the File menu and write the code as mentioned in the example.
2. Save the document with the name of variables.
3. Run the program from Run menu or press Ctrl+F5.
4. Open the variables.py file and add Comment using # Example Code
5. Save and run the program and python shell will
ignore the comment line.
Assign Value to Multiple Variables:
Python allows us to assign values to multiple variables in one line:
Multiple values can be assigned to the same variable in one line:
Output Variables
The Python print statement is often used to output variables. To combine both text and a variable,
Python uses the + character:
We can also use the + character to add a variable to another variable:
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 60 of 95
Programming the Computer (Python) Class 7
For numbers, the + character works as a mathematical operator:
If we try to combine a string and a number, Python will give an error.
Python Numbers:
There are three numeric types in Python:
• int
• float
• complex
Variables of numeric types are created when
we assign a value to them:
To verify the type of any object in Python, use the type() function:
• Int, or integer, is a whole number, positive or negative, without
decimals, of unlimited length.
• Float, or "floating-point number" is a number, positive or negative,
containing one or more decimals.
Type Conversion
We can convert from one type to another with the int() and float() methods:
Example Code Output
Calculations with Numbers
We can also use Python to do any kind of calculation: addition, subtraction, multiplication, division,
etc. The rules that we have learned in Microsoft Excel for the use of parentheses apply here, too. For
examples, let’s suppose that we want to display the term percentage of a student for a subject by
using averages in exam marks and course work.
Multiplications and divisions are calculated before additions and subtractions. This means that 4+2*5
gives you 14 and not 30. Use parentheses to prioritize the sequence of calculations.
For this example, we will also look into the user interaction using INPUT feature of python to take
data from the user end.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 61 of 95
Programming the Computer (Python) Class 7
1. In this example, the first line is having a comment
nd
2. In the 2 line, we have declared a variable named Subject with user INPUT to take subject
name form user.
rd
3. In the 3 line, we have declared a variable name Exam while setting its data type to float.
rd
4. In the 3 line, we have declared a variable for course work with the name of CW while
setting its data type to float.
th
5. In the 5 line, we declare the variable name Percentage while setting its value to a
mathematical calculation of Exam+CW divided by 2 to get the average percentage of the
subject.
th
6. In the 6 line, we have printed the string value along with the values of the Subject variable
and percentage variable.
Perform the same exercise step by step for practice.
LIST in Python:
In Python, you can store your data into variables, but you can also put them in lists. A list is just an
ordered collection of items which can be of any data type. Creating a list is as simple as putting
different comma-separated values between square brackets. Each element of a list is assigned a
value by using an index.
An example of a list could be:
To call a list element is very easy as calling a cell reference in excel:
By this code, pythons output will be Samsung, as the count in the list starts from 0.
Delete and Add List Elements:
Del command is used to delete a list element as mentioned in the example below:
Code Output
To add an item to the end of the list, use the append() method:
Code Output
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 62 of 95
Programming the Computer (Python) Class 7
Python Conditions and If Statements
These conditions can be used in several ways, most commonly in "if statements" and loops.
IF
An "if statement" is written by using the if keyword.
Code Output
In this example, we use two variables, a and b, which are used as part of the if statement to test
whether b is greater than a. As a is 33, and b is 200, we know that 200 is greater than 33, and so we
print to screen that "b is greater than a". Indention is necessary. If we do not use the indention as
mentioned in the example, python will give an error.
Elif for Multiple Conditions
The elif keyword is python’s way of saying "if the previous conditions were not true, then try this
condition".
Code Output
In this example a is equal to b, so the first condition is not true, but the elif condition is true, so we
print to screen that "a and b are equal".
Else
The else keyword catches anything which isn't caught by the preceding conditions.
Code Output
In this example a is greater than b, so the first condition is not true, also the elif condition is not true,
so we go to the else condition and print to screen that "a is greater than b". We can also use the else
without using elif.
Conditional Operators & Logical Operators:
Conditional Operators Logical Operators
Operator Meaning Operator Meaning
== Equal to and Both sides must be true
> More than or One Side or other must be true
< Less than not Negates truth
>= More than or equal to
<= Less than or equal to
!= Not Equal to
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 63 of 95
Programming the Computer (Python) Class 7
Python “For” Loops
A for loop is used for repeating over a sequence (that is either a list or a string). This is less like the
‘FOR’ keyword in other programming languages and works more like an iterator method as found in
other object-orientated programming languages.
For example, we have a list of students and we want to display the student with the highest marks
without using the max() function. We will use the following code:
st
1. In the 1 line of this code, we have created a list StdMrks with four values stored in it.
nd
2. In the 2 line, we have declared a variable name MaxMarks with an integer value of 0.
rd
3. In the 3 line, we use for loop while declaring another variable “i” with the range of four.
This means this loop will run 4 times. Every time FOR loop runs, it will increase the value of
the “i” variable.
th
4. In the 4 line, we have set a condition to check that if StdMrks[i] variable is greater than
nd
MaxMrks (declared 0 in 2 line) variable then change the value of MaxMarks[i] to StdMrks
value. (StdMrks[i] variable is going to change its value every time the loop runs and change
the index of StdMrks. This process is also known as unary increment). Using indention is
compulsory or python will not consider the For loop elements and give an error.
th
5. In the 5 line, MaxMrks is setting its value equal to the current value of StdMarks only if the
condition in the previous line is true.
th
6. In the 6 line, we have just printed the value of MaxMrks along with a string sentence.
Python Functions
In Python, a Function is a group of related statements that perform a specific task. Functions help
break our program into smaller and modular chunks. As our program grows larger and larger,
functions make it more organized and manageable.
Furthermore, it avoids repetition and makes code reusable. Function names cannot have spaces in
between. Instead of spaces use _ underscore to connect the words.
In Python, a function is defined using the def keyword and for executing the function we can use the
function name along with parenthesis ().
Code Output
Shown above is a function which consists of the following components.
• Keyword def marks the start of function header.
• A function name to uniquely identify it. Function naming follows the same rules of writing
identifiers in Python.
• Parameters (arguments) through which we pass values to a function. They are optional.
• A colon (:) to mark the end of function header.
• The last line executes the function, we can call or use the function in our code wherever it is
needed.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 64 of 95
Programming the Computer (Python) Class 7
Example & Practice:
In this example, the input function takes no parameters. So this operation informs the computer to
wait until you type your name and press Enter. When you press Enter, the program reads what you
have typed and with the print function, it displays a new text string.
Example & Practice:
On the other hand, if our function uses an external value, we have to put the values of the
parameters in parentheses. For example, type this code and enter Pakistan1248 as a password:
Converting code into a function:
We have already experienced this code earlier but now we have converted the same into a function
and now it can be recalled and reused whenever required in the program.
Create shapes and graphics with Python (Tkinter):
The Canvas widget supplies graphics facilities for Tkinter. Among these graphical objects are lines,
circles, images, and even other widgets. With this widget, it's possible to draw graphs and plots,
create graphics editors, and implement various kinds of custom widgets and for using those we need
to call/import the library of Tkinter so we can use these functions.
We will draw our first example, drawing a line.
The method create_line(coords, options) is used to draw a straight line. The coordinates "coords"
are given as four integer numbers: x1, y1, x2, y2 this means that the line goes from the point (x1, y1)
to the point (x2, y2).
Code Output
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 65 of 95
Programming the Computer (Python) Class 7
For creating rectangles, we have the method create_rectangle(coords, options). Coords are again
defined by two points, but this time the first one is the top left point and the bottom right point of
the rectangle.
Code Output
The following image with the coordinates will simplify the understanding of the application of
create_lines and create_rectangle in our previous example.
We can create an oval on a canvas c with the following method:
id = C.create_oval ( x0, y0, x1, y1, option, ... )
This method returns the object ID of the new oval object on the canvas C. The following script draws
a circle around the point (50,50) with the radius 100:
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 66 of 95
Programming the Computer (Python) Class 7
Code Output
Events:
Events in python are more likely we have in other programming languages. They also execute at any
specific action/signal occurred for i.e. hovering a mouse at a certain point, clicks of the mouse either
right click or left click and so on.
A Tkinter application runs most of its time inside an event loop, which is entered via the mainloop
method. It waits for events to happen. Events can be key presses or mouse operations by the user.
Tkinter provides a mechanism to let the programmer deal with events. For each widget, it's possible
to bind Python functions and methods to an event.
widget.bind(event, handler)
If the defined event occurs in the widget, the "handler" function is called with an event object,
describing the event.
Code Output
In this program, the event will be triggered by clicking on the Tkinter widget window. If we click once
it will say “Single Click, Button-1” as defined in string values and if we double click it will say “Double
click, so let’s stop” as defined in a string value.
Let's have another simple example, which shows how to use the motion event, i.e. if the mouse is
moved inside of a widget:
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 67 of 95
Programming the Computer (Python) Class 7
Every time we move the mouse in the Message widget, the position of the mouse pointer will be
printed. When we leave this widget, the function motion() is not called anymore.
Basic colour list plot for python. There are more colours which can be used with basic words like
forestgreen or lime etc.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 68 of 95
Programming the Computer (Python) Class 7
Checking for Bugs:
A software bug is a coding error that causes an unexpected defect in a computer program. In other
words, if a program does not perform as intended, it is most likely because of a bug.
There are bugs in software due to unclear or constantly changing requirements, software
complexity, programming errors, timelines, errors in bug tracking, communication gap,
documentation errors, deviation from standards etc.
There are two types of errors/bug in python or any other programming language.
Syntax Error: Errors in typing the commands and variables. Syntax errors will be automatically
detected by the Python IDLE and will show you the error in a dialogue box with a suggested solution
or the line number where the mistake has been done:
Logical Error: A logical mistake while designing the program which occurs due to the improper
planning of the program flow. Logical errors can be avoided by working on a Data Flow Diagram
(DFD), one practice of DFD is also a flowchart which is an extract of the algorithm. Mentioned below
are the few areas which can be used to avoid logical errors in your program:
• Form a hypothesis or two before looking at code.
• Resolve syntax errors.
• Start the debugger.
• Identify key variables or conditions.
• Step to your suspicious code.
• Look at the relevant variables.
• Predict what the suspicious line should do.
• Compare your expectations with reality.
• Think about your logic.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 69 of 95
Programming the Computer (Python) Class 7
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 70 of 95
Robotics – Edison Class 7
Robotics – Edison
What is Robotics?
Robotics is a branch of engineering that involves the conception, design, manufacture, and operation
of robots. This field overlaps with electronics, computer science, artificial intelligence, mechatronics,
nanotechnology and bioengineering.
Whenever the word ROBOTICS is used, we think of a machine which would have metal arms, legs,
bionic eyes and the robotic voice. This machine is called a humanoid or android.
Robotics is all about automation of any process or task. A robot can
contain numerous electronic or non-electronic parts like
motors, battery, chassis, wirings, sensors, computer boards
for programming etc.
Science-fiction author Isaac Asimov is often given credit
for being the first person to use the term robotics in a short story composed in the 1940s. In the
story, Asimov suggested three principles to guide the behaviour of robots and smart machines.
Asimov's Three Laws of Robotics, as they are called, have survived to the present:
1. Robots must never harm human beings.
2. Robots must follow instructions from humans without violating rule 1.
3. Robots must protect themselves without violating the other rules
Why Robotics?
Robots make our life easier and much safer Robots can do tasks
which are dangerous for humans like bomb diffusion, security
guard, and Mars rover etc. Besides these dangerous tasks, robots
can perform tasks which humans are not good at such as:
Safety: Safety is the most obvious advantage of utilizing robotics.
Heavy machinery, machinery that runs at high temperatures, and
sharp objects can easily injure a human being. By delegating
dangerous tasks to a robot, we can avoid human accidents.
Speed, consistency & Production: Robots don’t get distracted or need to take breaks. They don’t
request vacation time or ask to leave an hour early. A robot will never feel stressed out and start
running slower. They also don’t need to be invited to employee meetings or training session. Robots
can work all the time, and this speeds up production. Robots never need to divide their attention
between a multitude of things. Their work is never contingent on the work of other people. They
won’t have unexpected emergencies, and they won’t need to be relocated to complete a different
time-sensitive task. They’re always there, and they’re doing what they’re supposed to do.
Automation is typically far more reliable than human labour.
Perfection & Accuracy: Robots will always deliver quality. Since they’re programmed for precise,
repetitive motion, they’re less likely to make mistakes. In some ways, robots are simultaneously an
employee and a quality control system. A lack of quirks and preferences, combined with the
eliminated possibility of human error and the outcomes are quite accurate than the humans.
Job Creation: Robots don’t take jobs away. They merely change the jobs that exist. Robots need
people for monitoring and supervision. The more robots we need, the more people we’ll need to
build those robots. By training your employees to work with robots, you’re giving them a reason to
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 71 of 95
Robotics – Edison Class 7
stay motivated in their position with your company. They’ll be there for the advancements and
they’ll have the unique opportunity to develop a new set of tech or engineering-related skills.
Robots are taking over the world. OK, not really. Not yet. But they are becoming increasingly
prevalent in almost every industry, from healthcare and manufacturing to defence and education.
Here is the list of the organizations working on robotics as life essentials:
Sphero invented a now world-famous app-
enabled robotic ball, which is used in
SPHERO classrooms all over the world to teach through
play. In addition to the original ball, other
products include the Sphero 2.0 and the Sphero
Mini as well as app-enabled racing robots
named Ollie and Darkside. The company’s
Sphero Edu app is a hub for programming its
robots and more.
From the Piaggio Group that brought you the
Vespa scooter comes Piaggio Fast Forward; a
robotics company dedicated to creating
GITA goods. The company’s flagship robot, Gita, is a
lightweight mobility solutions for people and
mobile carrier that follows people around and
carries up to 45 pounds. Gita can be used to
carry everything from heavy books between
classes to groceries.
Diligent’s AI-enabled robots are designed to
work with people in everyday environments.
The company’s autonomous “Moxi” robot can
MOXI logistical tasks in hospitals like setting up
be left alone to perform time-consuming
patient rooms and restocking supply rooms.
Capable of navigating hospital hallways and
other tight spaces, Moxi is even imbued with
“social intelligence” that’s conveyed through its
head movements and LED eyes.
Equipped with a speaker, camera and video
screen, Anybots robots serve as remote avatars
that are controlled through a browser-based
ANYBOTS interface and connect to the Web over Wi-Fi.
Say you’re in Chicago and you want to also be
in Taiwan. Your robot — which has a built-in
guidance system, live video streaming
capabilities and is steered with the arrow keys
on your computer’s keyboard — can act as a
stand-in.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 72 of 95
Robotics – Edison Class 7
Boston Dynamics makes a host of different
robots that have human- and animal-like
dexterity. A few examples: There’s SpotMini, “a
nimble robot that handles objects, climbs stairs,
and will operate in offices, homes and
ATLAS outdoors”; Atlas, a “dynamic humanoid” that
“uses balance and whole-body skills to achieve
two-handed mobile manipulation”; and
WildCat, a speedy quadruped that “uses a
galloping gait much like a dog or horse and
leans into turns to maintain traction and
balance.”
According to Harvest, its HV-100 model was the
world’s “first fully autonomous robot that
works alongside people in unmodified industrial
environments.” Today, more than 30 of them
serve major agricultural players across the U.S.
to help increase productivity, efficiency and
plant quality. Harvest’s robots lessen the load
HV-100 when it comes to manual labour so their human
counterparts can focus on other facets of the
growing process.
Meet Edison:
Edison robots are a complete STEAM teaching resource designed to
bring coding to life. Edison is an expandable robotics system, which
works with any LEGO brick compatible building system, the robots
can be used as the programmable base for an incredible assortment
of engineering and STEM projects.
Edison can be programmed through 4 platforms:
• Barcodes and Remote Control
• EdBlocks – Graphical Language
• EdScratch – Scratch Language interface
• EdPy – Python Programming Interface
Edison is equipped with all the sensors, outputs and motors needed to introduce you to the amazing
world of robotics.
Edison’s creator, Brenton O’Brien says that “A robot is a machine that can behave autonomously”
which is also a simple definition of robotics.
Robotics wouldn’t be possible without electronics. Your Edison robot has electronics which you can
see through the transparent top. There are resistors, capacitors, transistors, motors and more. The
most important electronic part is Edison’s microcontroller (MCU).
The microcontroller is like Edison’s brain. It’s where all the robot’s thinking’
happens. Edison’s microcontroller is very similar to the processor chip inside
a computer, only much smaller. Just like a processor chip in a computer,
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 73 of 95
Robotics – Edison Class 7
Edison’s microcontroller contains programs. These programs are what allow Edison to ‘think’ and
make decisions.
Edison carries three hardware buttons. With the record button, you download a program to the
robot, the play button, starts the execution of the program and by pressing the stop button, the
program is stopped. It is also equipped with different sensors to understand its environment and
interact with it.
The following YouTube channel is very beneficial to develop the coding skills for programming Edison
robot through EdScratch and EdPy: https://www.youtube.com/user/microbric/videos
Edison’s Sensors, Buttons and Switches:
To use Edison, you’re going to need to know where all of Edison’s sensors are located and become
familiar with the robot’s three buttons.
EdPy is Edison’s text-based programming application. The robot is controlled by a program, which
contains the instructions and rules governing the robot’s behaviour. Any program you create in EdPy
must be downloaded to Edison before the robot can perform the actions. The program can be
changed only in the EdPy platform and in such cases, you will need to download the new program to
the robot again.
To connect Edison with the computer to download the
program you create with EdPy, you need the
EdComm cable which is Edison’s special
cable. The EdComm cable is used to
download programs to Edison. It
connects into the headphone/audio Socket/jack on your computer or tablet or phone or any other
computing device which contains an audio jack and a working web browser to access EdPy app.
Important Note: Before you begin programming with EdPy you MUST make sure that your
computer volume is MAX and it is important that ALL sound enhancements are disabled. This
includes Altec Lansing enhancements, Realtek audio enhancements, Beats audio, Spatial sound, and
all equalizers. Edison will fail to program if this is not done.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 74 of 95
Robotics – Edison Class 7
EdPy App:
EdPy app is one the web-based programming interface to program Edison. EdPy is a text-based
programming language based on Python. Python gives more flexibility to your programs and offers
more precise control of your robot. EdPy application can be accessed online and without any
installation on your computer or tablet.
In order to program Edison through EdPy App access this web: https://www.edpyapp.com/
Version mentioned
on Edison bot.
Click on this Launch Click the Start
Ed.Py Button Programming
button below the
Edison V2.0 heading
EdPy Interface:
Check Code / Download the
The Menu
Button debugger program to Edison
Example Compiler Programming Explanation of Help box on python
Programs Output Area a line of code and parametric
commands for the
Edison robot and code
examples
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 75 of 95
Robotics – Edison Class 7
EdPy Online Account:
Using the online EdPy programming environment you can save your work online and have access to
your projects from any browser. All you need to do is to create an account and log in. The online
EdPy programming environment can be used with or without an account. Without an account, you
don’t have the option to save a project so that you can work on it later.
Step3: Enter details and click on
Step1: Click on Menu Step2: Click on Create Account
Create Account & Login to proceed
Working with EdPy:
It is highly recommended to work on EdPy while logged into your account so all the work will be
available/save for your convenience.
The Programming area in EdPy has numbered lines. All Edison programs must contain the setup code
which is included in lines 1 to 11. When you start a new program, you should start typing on line 13.
When you finish writing you should check the program for errors with the Check Code button. If the
program has any errors, they appear in the Compiler Output area.
The following program will turn on the left LED of the robot for
10 seconds.
There is no need to enter the mentioned below code and it will
be available always whenever you start a new program,
however you can customize the parameters as per your
requirement.
• Import Ed is a predefined code to import the library of
Edison functions in python.
• Ed.EdisonVersion = Ed.V2 is the code to define the version of Edison we are using which is
Version 2.
• Ed.DistanceUnits = Ed.CM is the code to define the unit of measurements to drive the
Edison.
• Ed.Tempo = Ed.TEMPO_MEDIUM is the code to define the music/sound pace.
After this line #-------Your code below --------- enter the code to work on Edison.
• Ed.LeftLed(Ed.ON) is to turn on the left LED of Edison
• Ed.TimeWait(10, Ed.TIME_SECONDS) is the code where we have defined the interval
between the LED to turn on.
EdPy works on python and will work with the same rules use for Python like case sensitivity and
indentation, therefore you need to be very careful entering the code according to python style.
Create the above-mentioned program and save it on the online account.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 76 of 95
Robotics – Edison Class 7
Edison Drive Functions with EdPy:
The Edison robot has two motors that allow it to
perform a handful of movements. With its two
motors, the robot can move forwards and backwards
and also spin both left and right.
To move your Edison robot you use the drive
function, which has three parameters: direction,
speed and distance.
The constant “Ed.DistanceUnits” that is set in the
Setup code controls the measurement of distance.
There are three distance units: centimetres, written
as Ed.CM, inches, written as Ed.INCH and time,
written as Ed.TIME.
Ed.Drive Direction Parameters:
Ed.FORWARD - Edison drives forwards.
Ed.BACKWARD - Edison drives backwards.
Ed.FORWARD_RIGHT - Edison uses one wheel to turn forwards right (clockwise).
Ed.BACKWARD_RIGHT - Edison uses one wheel to turn backwards right (counter-clockwise).
Ed.FORWARD_LEFT - Edison uses one wheel to turn forwards left (counter-clockwise).
Ed.BACKWARD_LEFT - Edison uses one wheel to turn backwards left (clockwise).
Ed.SPIN_RIGHT - Edison spins on the spot to the right (clockwise).
Ed.SPIN_LEFT - Edison spins on the spot to the left (counter-clockwise).
Ed.STOP - Stops Edison immediately.
To make Edison drive forward/backwards enter this code:
• While entering the code you will observe that a
code hint menu will appear, from which we can
select the entire code by pressing tab and there
would be no need to type the whole code. Using
the code hint menu will help you program the
code in less time and above all, there will be less chance for syntax errors.
• Check the code from Check Code button from the
right top corner.
• Click on Program Edison button right top corner.
• Make sure the Edison is connected to your
computer’s headphone jack via the EdComm
Cable.
• And also make sure your computer’s volume at maximum and all sound enhancements are
disabled.
Always remember that while using the Ed.FORWARD and
Ed.BACKWARD command, the “Distance” parameter works
as the number of steps(cm/inch) Edison has to move.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 77 of 95
Robotics – Edison Class 7
Whereas, while using Ed.FORWARD_RIGHT,
Ed.FORWARD_LEFT, Ed.SPIN_RIGHT,
Ed.SPIN_LEFT, the “Distance” parameter works
as the angle at which Edison has to turn. This means that a code like “Ed.Drive(Ed.SPIN_LEFT,
Ed.SPEED_5, 90)” will make the Edison robot turn 90 degrees counterclockwise.
Creating a Square with Edison:
After successfully programming the Edison to move
backwards and forward, program the Edison to move
in square form.
• Ed.Drive(Ed.FORWARD, Ed.SPEED_6, 20) - This
code will drive Edison forward to 20cm at the speed of 6
• Ed.Drive(Ed.SPIN_LEFT, Ed.SPEED_6, 90) - This code will rotate the Edison to 90 degrees at
the speed of 6
Using Variables for Edison
A Python variable is a reserved memory
location to store values. In other words,
a variable in a python program gives data to the computer for processing.
This program will make Edison robot turn right using a value from the variable. degreesToTurn = 90
is the variable with the parameters of 90. This variable is going to use as a reference in the program
to turn the Edison robot to 90 degrees.
Most important function to use the variable is to have flexibility in the program, rather than entering
data directly into a program, we use variables to represent the data. Then, when the program is
executed, the variables are replaced with real data.
Using Loops to Program Edison
For Loop
In Python, a ‘for’ loop is a control
structure which can be used to repeat
sets of commands or statements any
number of times.
Using a ‘for’ loop allows you to repeat
(also called ‘iterate over’) a block of
statements as many times as you like.
The ‘for’ loop often goes together with the ‘range()’ function in Python.
In EdPy, range() only has one input parameter. That input parameter determines the upper limit of
the set and the lower limit is always 0, or in a simpler definition it can be used to define the times of
loop should repeat itself.
Creating a square with Edison:
Using loop to create a program which has several repeating codes is a smart decision. The following
program will create a square using a loop.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 78 of 95
Robotics – Edison Class 7
Creating a Circle with Edison:
It may not be possible to drive in a perfect
circle, but a shape with thousands of very
small sides can closely approximate a
circle. degreesToTurn is a variable with a value of 1.
Perform the following practical task:
Create a program to make your robot drive forward for 3 seconds then flash both LED lights. After
that, using the For loop, Edison is to drive in the form of a square and stop.
While Loop
The While Loop repeats a statement or group of statements while a given condition is TRUE. It tests
the condition, which is written as an expression, before executing the loop body.
While the expression evaluates to TRUE, the program repeats the commands in the loop. When the
expression evaluates to FALSE, the program moves on to the next line of code outside the loop.
In this program, we want the
Edison to follow a torch and we
need this program to run
infinitely, therefore, we will use
the while loop.
Play tunes on Edison:
Edison can play individual musical notes through its small
speaker using the Ed.PlayTone() function in EdPy.
The Ed.PlayTone() function takes two input parameters:
the note and the duration. The note determines what note
to play and the duration determines the given length of time the note should be played.
Music Notes for Edison
Duration Parameters
A Robot with Logic and Senses:
An important part of coding is making decisions. The most common way to do this is to use an ‘if
statement’. An ‘if statement’ asks whether a condition is true or false. If the result is true, then the
program executes the block of statements following the ‘if statement’. If the result is false, the
program ignores the statements inside
the ‘if statement’ and moves to the
next line of code outside of the ‘if
statement’.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 79 of 95
Robotics – Edison Class 7
For Edison, we can create a program which makes a decision using more than two conditions. To do
this, you use another Python syntax structure:
• if expression: statement(s)
• elif expression: statement(s)
• else: statement(s)
‘Elif’ is how you say ‘else if’ in Python. You can use elif to write a program with multiple if conditions.
A program using if/elif/else still moves sequentially from the top down. Once the program runs any
indented code inside any part of the if statement structure, it will skip the rest of the structure and
move on to the next line of code outside the structure.
This means that if the if statement at the top is true, the program runs the indented code for the if
expression and skips any elif sections as well as the else section if there is one. If the if statement is
false, however, the program skips that section of indented code and moves to the first elif section.
Again, if the first elif condition is
true, the program runs its indented
code and skips everything below it in
the if statement structure (any other
elif and the else condition if there is
one). If this elif condition is false, the
program moves to the next part of
the if statement structure and so on.
This program has three different
paths that it can take when an
obstacle is detected based on where
the detected obstacle is relative to Edison.
Perform the following practical task:
Write the above program using the EdPy app and download it to your Edison robot. Then run the
program to see how it works.
From this point onwards we will make programs in EdPy using the variables, loops, conditions,
motors and sensors of Edison.
Obstacle Detection:
Edison has two obstacle detection beams,
one on the front left and the other is on
the front right. This program tells Edison
to drive until it encounters an obstacle.
There are a couple of important things to
notice about this program. Look at line 13 of the program. This line turns Edison’s obstacle detection
beam to ‘on’. Whenever you want to use Edison’s obstacle detection beam in an EdPy program, you
always need to turn the beam to ‘on’ before the beam is used in the program.
Now, look at line 15 of the program. This line sets the speed to 5 in this program. When using
obstacle detection, you need to use a slightly lower speed to allow the robot to detect an obstacle
before colliding with it. If the speed is too fast, the robot will crash into obstacles before being able
to detect them.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 80 of 95
Robotics – Edison Class 7
Right and left obstacle detection:
In this program, Edison is going to
react to obstacles on the left or right.
To do this, we will use conditional
statements like if and elif.
This program has three different
paths that it can take when an
obstacle is detected based on where
the detected obstacle is relative to
Edison.
Perform the following practical task:
Write the above program using the EdPy app and download it to your Edison robot. Then run the
program to see how it works.
Clap Control Drive:
The Edison robot’s sound sensor is not just sensitive to claps. The sensors can respond to any loud
sound detected or vibrations similar to that
sound, which is why you can tap near the
speaker on the robot to trigger the sound sensor.
Edison’s motors, gears and wheels all make
sounds as they turn, which can trigger the sound
sensor. To prevent the sound of the robot driving
from triggering the sound sensor, you need to
alter the program.
You will need to add a TimeWait() function call with an input parameter of about 350 milliseconds to
give the robot’s motors time to stop.
You also need to use a ReadClapSensor() to clear the clap sensor.
Perform the following practical task:
Write the above program using the EdPy app and download it to your Edison robot. Then run the
program to see how it works.
Line Tracking Sensor:
In this program, you will learn about the Edison’s line tracking sensor and how Edison can use this
sensor to determine if it is on a reflective or non-reflective surface. How does Edison’s line tracking
sensor work?
Your Edison robot is equipped with a line tracking sensor, located near the power switch on the
bottom of the robot. This sensor is made up of two main electronic components:
A red light-emitting diode (LED), and A phototransistor (light sensor).
This image represents a cross-section of Edison’s line tracking sensor.
The line tracking sensor’s LED shines light onto the surface that
the Edison robot is driving on.
The phototransistor component is a light sensor. The
phototransistor measures the amount of light that is reflected off
of the surface beneath Edison.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 81 of 95
Robotics – Edison Class 7
In this activity, you will write a program so that your
Edison robot will drive forward on a white
(reflective) surface until a black (non-reflective) line
is crossed.
Look at line 13. This line calls the function
Ed.LineTrackerLed() and turns the state to ‘on’.
Just like with Edison’s obstacle detection beam, to
use the line tracking sensor in a program, you must first turn the sensor on. Turning the line tracking
sensor on will also activate the line tracker’s red LED.
Now, look at line 19. This line calls the Ed.PlayBeep() function. This line doesn’t affect the way the
line tracking program works. Instead, this line’s purpose is for debugging.
Practical task:
Write a program that will keep
Edison inside a black border using
the robot’s line tracking sensor.
By this program, Edison robot will
“bounce” inside the border.
Light Sensors:
In this activity, we will use a program
to have your Edison robot turn the
two LED lights on when it gets dark.
In this program, we are using the
‘less than’ (<) symbol to determine
the path that the program will take.
If the value returned from the
Ed.ReadLeftLightLevel() function is
less than 100, then the activateBothLights() function is called with the input parameter of Ed.ON.
Otherwise, the program moves to the ‘else’ part of the if statement, which also calls the
activateBothLights() function, but with the input parameter of Ed.OFF.
Light following:
In this activity, we will write a
program so that your Edison
robot will follow the light from
a torch (flashlight).
This program compares the light level between the right light sensor and the left light sensor to
determine the flow of the program. The presence of the torch on either the left or right of the robot
will cause the robot to read a higher light level on that side of the robot. The logic of this program
says that when the right light level minus the left light level is less than zero, the robot drives left
towards the higher source of light, else the robot drives to the right.
Perform the following practical task: Write the above program of light sensor and light following
using the EdPy app and download it to your Edison robot. Then run the program to see how it works.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 82 of 95
Presenting Your Ideas – MS Sway Class 7
Presenting Your Ideas – MS Sway
What is Sway?
Sway is a new app from Microsoft Office that makes it easy to create and share interactive reports,
personal stories, presentations, and more.
Start by adding your text and pictures, search for and import relevant content from other sources,
and then watch Sway do the rest. With Sway, you’re no longer limited to picking a pre-designed
template that makes your presentations look like everyone else’s, and you don’t have to have any
design skills to transform and showcase information in modern, interactive, and attention-getting
ways.
With Sway, there’s no need to spend lots of time on formatting. Its built-in design engine takes care
of making your creation look its best. If the initial design doesn’t quite match your taste or mood,
you can easily apply another — or fully customize your layout to make it your own.
It’s super easy to share your finished Sways. Family, friends, classmates, and co-workers can see your
creations on the Web without signing up, signing in, or downloading anything. And you can change
the privacy settings for any Sway whenever you want more control over what you share.
What can I create with Sway?
Whether it’s a report, a presentation, a newsletter, a personal story, a photo album, or a visual trip
report, there’s virtually no limit on what you can express creatively with Sway.
Reports Presentations Newsletters Stories
If you’re not sure what’s possible, you can get inspiration by viewing and interacting with Sways that
other people have created. After you’ve signed in to Sway (see below), scroll down to the bottom of
the My Sways page, and then browse through the featured content under the heading “Get inspired
by a featured Sway.” You can also choose to start with one of the featured templates to begin using
and learning Sway.
Sign in to Start Creating
To get started with Sway, visit
sway.office.com in any browser and then
click Sign in on the top menu bar.
When prompted, enter the email address
you want to use with Sway. You can use
your free Microsoft Account (Hotmail,
Outlook.com) or any organizational
account given to you by your work or
school. If you don’t already have an account, visit www.microsoft.com/account to sign up for free.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 83 of 95
Presenting Your Ideas – MS Sway Class 7
Create:
On the My Sways page that opens
after you’ve signed in, click or tap
Create New to start creating your
first Sway.
Get to Know the Sway Storyline
The Storyline is where you type, insert, edit,
and format the content that tells your story.
Content is arranged in sequential order by
adding cards, each of which holds the type of
content you want — such as text, images,
videos, and even Office documents. The
order of cards can be rearranged at any time
to suit your needs.
Give Your Sway a Title
Click the Title your Sway placeholder text
shown in the first card on the Storyline,
and then type a short but meaningful
description of what your Sway is all
about. When you later share your
finished Sway, this title will be the first
thing that others will see.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 84 of 95
Presenting Your Ideas – MS Sway Class 7
Add Images and Text to Your Sway
To add content to your Sway, such as text,
images, or videos, click or tap the + icon at the
bottom of any existing card. You can also drag and
drop text and images right onto your Storyline.
(Don’t hesitate to experiment — you can change
the order of your content at any time and
customize each card the way you want.)
Add Content to Your Sway
You can easily search for and add additional
content to your Sway, such as an image that is
stored on your computer or mobile device. Sway
can also search the Web for the most relevant
content, such as videos, and add it to your Sway.
On the menu bar, click Insert, select your
preferred content source from the menu, and
then enter any search keyword or phrase into
the Search sources box.
Preview Your Sway
You can preview your work in progress at any
time by clicking the Design tab. When you
preview your Sway, you can see how it will
appear to others when you later decide to share
it. To fully experience your Sway, click the Play
button on the top menu bar.
To return to your Storyline when you’re done
previewing your Sway, click the Storyline tab.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 85 of 95
Presenting Your Ideas – MS Sway Class 7
Change the Style of Your Sway
Sway lets you focus on what you’re trying
to communicate by taking care of the
formatting, design, and layout of your
content. You can keep Sway’s suggested
default design, select and apply your own,
and even customize the layout.
To choose a style for your Sway, click
Design on the menu bar, and then select
Styles. To choose a random look and mood
for your Sway at any time, click the Remix!
button until you find a design and layout
you like. You can also adjust a specific part
of the currently applied style, such as
colour, font, and textures, by clicking the
Customize button in the Styles pane.
If you want to control how others will view and navigate your Sway once you’ve shared it, select
whether your content should scroll vertically, horizontally, or appear like a presentation.
Share Your Sway
Ready to share your Sway with the world — or
perhaps just with selected people?
Click the Share button on the top menu bar
and then select how you want to share your
Sway.
Your choices on this menu depend on the type
of account that you used to sign in to Sway.
For a more detailed look at all available
sharing options, see Share your Sway.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 86 of 95
Mobile App Development – App Lab Class 7
Mobile App Development – App Lab
What is Applab?
Making your own apps is easy with App Lab! Whether you're new to coding or have some
experience. App Lab is a great tool for building new apps and sharing them with your friends.
Getting Started:
This is App Lab. On the left side is your app. On the right side is the code that will make it run. You
build your program by dragging in blocks from the toolbox. To start you'll just have one block called
'setProperty'.
The set property block changes the look of the elements on your screen. Like the buttons, labels, or
even the screen itself. First you need to decide which element you want to change. If you hover over
an element in your app you can see the name or ID here. Then go select that ID from the first
dropdown.
Elements have lots of properties you can change like their
text colour, background colour or font size. You can see
the full list and choose which property you want to change
in the second dropdown.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 87 of 95
Mobile App Development – App Lab Class 7
The last drop-down is where you'll write the value you want to use. The block will make a suggestion
for you. But you can always type in different colours or numbers yourself.
Once you're done, the block reads a bit like a sentence: 'Set button1's background colour to green.'
Hit run to see the changes you're building in code. If you reset you can drag in more blocks to change
other things about your app. Like the text!
For this tutorial, we'll be working in block mode but App Lab also supports working in text. Either
way you'll be programming in JavaScript, the language of the web. Each level has a goal, instructions
and an image of what you're aiming to create. If you're ever stuck, click on this picture and it will
show you exactly how to complete the level. But see if you can do it on your own first.
Responding to Events:
Now that you can change the look of your app let's make it interactive by responding to events!
Events are user actions like clicking a button, scrolling through a menu, or hovering over a picture.
Interactive apps need ways to respond to events, like playing a sound when I click this button. To do
this in App Lab you need to use a new block called 'onEvent'.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 88 of 95
Mobile App Development – App Lab Class 7
This program sets the screen to blue. I want the screen to turn green when I
click this button. First, I'll need to drag in an onEvent block. By hovering I know
the button's ID is "bigButton" so I'll select that in the first drop-down.
Next, I'll choose the type of event. There are lots of options you can pick from
but right now I'll leave it as a regular old click.
Finally, I'll add code inside the onEvent that will change the background colour
of the screen. You can read this block like a sentence: "On the event that the
button is clicked run all this code."
Let's test it. Blocks outside an onEvent still run right away so the screen starts
blue.
And when I click the big button the code inside my onEvent runs and my screen
turns green.
If you want to change more things after the event, like the text on the screen
just add more code to the onEvent
To make your program respond to more events add more onEvent blocks. Just
make sure not to put them inside of each other. Now it's time to try it out for
yourself. Have fun!
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 89 of 95
Mobile App Development – App Lab Class 7
Adding Sound:
In the toolbox, you'll find a new block called "playSound". Drag it into the
workspace. You can pick a sound to play by clicking the drop-down then clicking
"Choose".
From here you can either upload
a sound file from your computer
or search for a sound from the
sound library. The sound library
has lots of different categories
like instruments, background
music or animals.
Once you've got the sound you
want, click "Choose". When this
block runs, it will play the sound
you chose.
To add images to your elements you can just use the setProperty block. Select
the image property in the second drop-down
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 90 of 95
Mobile App Development – App Lab Class 7
Then select Choose from the third dropdown.
From here you can upload an image from your computer or you can look through a huge library of
icons in the icon library.
Back in code mode, you can use the setProperty block to change the icon colour of your icon. Once
you've picked what image your icon to use click Run to see how it looks.
Designing your app:
Use the switch on top of your app to go into Design Mode.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 91 of 95
Mobile App Development – App Lab Class 7
You can add new elements by dragging them onto the
screen. You can move them around to different
locations and change their size by dragging the bottom
right corner.
To change an element's properties, use the controls on
the right. For example, it's really easy to change this
button's text, colour, and font size.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 92 of 95
Mobile App Development – App Lab Class 7
When you add a new element to your screen it'll get a
generic ID like “button1”, “image2”. It's a good idea to
change this button's ID to something more meaningful like
rightButton. So that you'll know which one it is when you go
to the program.
If you add an element to your app by mistake, just drag it out
or hit the delete.
You can add entirely new screens to your app by dragging in a screen element
From the drop-down, at the top, you can quickly switch back and forth between the screens you
create.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 93 of 95
Mobile App Development – App Lab Class 7
Inside your app, you'll need a way to switch between all of these screens, so the setScreen block has
been added to the toolbox. Use setScreen inside the onEvent block to change screens at the click of
a button.
The City School/Academics/Computing Curriculum/Class7/2020-2021 Page 94 of 95
References
Some of the information contained in this document may have been retrieved or derived from the
following websites:
Microsoft Support https://support.microsoft.com/en-us/office
GCF Global https://www.gcflearnfree.org/
WonderShare Filmora https://filmora.wondershare.com/
Scratch MIT https://scratch.mit.edu/
Mobirise https://mobirise.com/help/
Edison https://meetedison.com/robot-programming-software/
WonderShare Edraw https://www.edrawsoft.com/guide/edrawmax/
WonderShare http://support.wondershare.com/
Code.org https://code.org/
Page 95 of 95
This page has been left blank intentionally
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Discover the best professional documents and content resources in AnyFlip Document Base.
Search