Ground Station Workshop

Git, Communications & Web Developmenmt

Agenda

Please fill out this attendance form. Completion of this form is to be used to display the demographics of the club as well as record attendance.

This is the agenda for the Ground Software workshop. The workshop date is October 11, 2018. Meeting lasts from 6:45 PM - 9:00 PM (Don't worry if you can't stay the whole time!). Please note that the minutes are approximations, so expect each concept to have an additional ±10 minutes.

First Hour:

Second Hour:

Quick Note for Mac Users

If you experience any serious slow-down/crashes when building software, open the VirtualBox application and decrease the number of CPUs and RAM of the "uas-env" virtual machine. Alternatively, you can use this command:

VBoxManage modifyvm uas-env --cpus 2 --memory 3072

Using Git with VS Code

Git User Config

This is important to identify who you are when committing code changes.
Check your current git user config in a terminal:

git config user.name
git config user.email

If your name and email are printed you are good to go. If nothing is printed, run the following with your name and the email you use for your GitHub account:

git config --global user.name "John Doe"
git config --global user.email johndoe@example.com

Cloning

  1. Download Visual Studio Code and launch it.
  2. Type Ctrl/Cmd+Shift+P. (In VS Code, this is known as the Command Palette.)
  3. Type the word "clone" and click on "Git: Clone".
  4. Paste https://github.com/uas-at-ucla/drone_code.git in the text box. Hit Enter.
  5. Select the folder where you want to store the repository.
  6. Somewhere along the way you will need to enter your GitHub password - we'll figure out this step together.

Pulling

  1. Click the Sync icon to the right of "master" in the bottom left of the window. This retrieves updates from the drone_code GitHub repository.

Creating & Pushing to a branch

  1. If you don't have the 'drone_code' folder open in VS Code, open a new VS Code window, click the file icon, and click Open Folder.
  2. Click "master" in the bottom left of the VS Code window, then click "+ Create New Branch". Type "[yourname]_test" in the text box and hit Enter. Please follow this naming scheme, so we can keep track of the branches created for workshops.
  3. Make a change to a file - any file will do.
  4. Click on the "Y" branching icon on the left to bring up git control. It should have a "1" on it showing that you have changed 1 file.
  5. Click "+" where it says "CHANGES" to stage you changes. Staging a file tells git to apply the changes to it in the next commit.
  6. Type a message in the Message box (ex: "Changed a file"). Click the checkmark to commit.
  7. To push your local commits to our online GitHub repository, click the icon to the right of your branch name in the bottom left of the window.

What is a branch?

Git Branch
For those not present at the workshop, here's a quick explanation of branches.

Make a Pull Request

  1. A pull request is a request to pull commits from one branch into another. Most of the time, you will do this to merge changes from your specific branch into the master branch.
  2. Visit https://github.com/uas-at-ucla/drone_code.
  3. If everything went perfectly when pushing, you will see a message letting you know that you just pushed to a branch, and there will be a button to make a pull request. If you don't see this message, follow steps 3 and 4.
  4. In the "Branch: master" dropdown, search for your branch by typing in the name. Select it.
  5. Click on "New Pull Request".

Communications Diagram


Interop System

<br/>Interop System<div><br></div>
WEB INTERFACE
WEB INTERFACE
GROUND COMPUTER
GROUND COMPUTER
ObstaclesWaypointsBoundaries
Drone
Drone
ObstaclesWaypointsBoundariesImage ClassificationsCommands &Mission Plan
IMAGE PROCESSORS
IMAGE PROCESSORS
ImagesTelemetryCurrent MissionImagesTelemetryCurrent MissionImagesDrone TelemetryClassified ImagesCommands &Mission PlanObstaclesCropped Images &Image Classifications
Ground Station Server

Relays information to and from the judges' interoperability server. Manages the data that is seen on the web interface and communicates with drone.
[Not supported by viewer]
Vision Server

Retrieves images from drone and delegates tasks to image processing clients.
[Not supported by viewer]
Controls

See drone on Google maps and receive telemetry. View obstacles and required waypoints. Plan out mission.
[Not supported by viewer]
Images

View all photos taken by the drone. Crop, classifiy, and submit manual entries to interop. See status of autonomously processed images.
[Not supported by viewer]
Detector

Uses YOLO to identify and localize objects in photos
[Not supported by viewer]
Cropper

Crops photos where 
objects are found
[Not supported by viewer]
Classifier

Receives cropped images and classifies using neural network
[Not supported by viewer]

Demo of last year's ground station software

Look at the screen!

Run the proof-of-concept ground station

Make sure you have the drone_code repository cloned, and that you ran the install script (./tools/scripts/install.sh).

cd /path/to/drone_code
python src/ground/ground.py

If this doesn't work for whatever reason, you can also run the ground station with Docker:

./uas.sh ground run

Visit http://localhost:3000

Intro to Web Development

The web development skills required for UAS@UCLA is considered full stack engineering. For the purposes of this club, we will simplify the definition of full stack engineering.

Full stack engineering consists of a frontend, a backend, and occassionally a data warehouse.

Web Application Architecture

The Model-View-Controller (MVC) is an architectural pattern that separates an application into three main logical components: the model, the view, and the controller. We will once again simiplify the meaning of MVC to the following:

  • Model: The part of our application that will deal with the database or any data-related functionality.
  • View: Everything the user will see. Basically the pages that we’re going to send to the client.
  • Controller: The logic of our site, and the glue between models and views. Here we call our models to get the data, then we put that data on our views to be sent to the users.

Mvc

Frontend

The frontend is the user interface of the web application. The frontend is the presentation that end users see. These end users operate the client computers. HTML, CSS, and JavaScript makes up the entirety of the frontend. HTML is a type of XML. CSS is a style sheet language that describes the presentation of a document written in HTML.

HTML Example

<!DOCTYPE html>
<html>
    <body>

        <h1>My First Heading</h1>
        <p>My first paragraph.</p>

    </body>
</html>

CSS Example

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

h1 {
    font-size: 10em;
}

Backend

The backend performs all the behind-the-scenes for the web application, such as hosting the server, performing database queries, modifying data structures, or processing HTML inputs. The data modified in the backend then gets sent to the frontend via either sockets or HTTP methods. UAS@UCLA uses Node.js as its backend development language.

Intro to Node.js & JavaScript

  1. In a terminal, enter node --version to make sure you have Node.js installed.
  2. Create a new folder on your computer for making a test Node.js project. For example, run mkdir node-test.
  3. Set your working directory to the folder: cd node-test.
  4. Run npm init. Hit enter to keep all the default settings. A file called package.json will be created.

Node Package Manager (npm) Basics

The package.json file is universal for all npm projects. Its two most important functions are:

  1. Define which packages (dependencies) your project needs to run. Packages are retrieved from an online npm repository.
  2. Define shortcuts for scripts that help you run different parts of your project (building, running, testing, etc.).

There is a special way to add dependencies to your project:

npm install --save socket.io  # socket.io is just one of thousands of available packages

This creates a folder in your project called node_modules where all dependencies are installed. It also adds the dependency to package.json. Go ahead and open package.json to see what was added.
If you share the project via GitHub, you won't be sharing node_modules, but you will share package.json. Other users can update their installed dependecies with the following:

npm install

With no arguments, npm install reads the depency list in package.json, so all collaborators will have the same collection of packages. There is (probably) a good reason why installed dependencies aren't shared directly, but we won't go into that.

JavaScript basics

  1. Inside the same folder (node-test), create a new file with a .js extension. For example, run touch test.js in your terminal session.
  2. Open test.js in a text editor that you are comfortable coding with. VS Code is recommended.
  3. Here's a hello world program:
// test.js
console.log(Hello, World!);
  1. To execute the program, run node test.js your terminal session.

Examples

Example 1:

let something = "a string";  // Use 'let' to declare a variable. There are no type declarations in JavaScript!
console.log(something);

Example 2:

const PI = 3.14;  // Declare a constant, whose value can't change
console.log(PI);

Example 3:

let someArray = ["one", "two", "three"];
console.log("The first element of the array is " + someArray[0]);

for (let element of someArray) { // 'of' is used to iterate elements of an array
  console.log(element);
}

someArray.push("newElement");
console.log("The last element of the array is " + someArray[someArray.length - 1]);

Example 4:

let someObject = {
  someKey: "someValue",
  coolestDrone: "Spinny"
};

console.log("Accessed " + someObject["someKey"] + " Using bracket notation");
console.log("Accessed " + someObject.someKey + " Using dot notation");

console.log("Listing all values of someObject:")
for (let key in someObject) {  // 'in' is used to iterate keys of an object
  console.log(key + ": " + someObject[key]);
}

Example 5:

if (1 == '1') {
  console.log("1 == '1' is true");
} else {
  console.log("1 == '1' is false");
}

if (1 === '1') {
  console.log("1 === '1' is true");
} else {
  console.log("1 === '1' is false");
}

if (1 === 1) {
  console.log("1 === 1 is true");
} else {
  console.log("1 === 1 is false");
}

console.log("Using double equals (==) is weird, because it tries to convert variable types.");
console.log("Triple equals (===) is usually a better choice, because it doesn't perform unnecessary type conversions.");

Example 6:

function someFunction() {
  console.log("I'm a regular function!");
}
someFunction(); //call the function

let arrowFunction = () => {
  console.log("I'm an arrow function!");
}
arrowFunction(); //call the function

Socket.IO

Follow along with the SocketIO tutorial.

React

Here is an intro to React and create-react-app

First Projects

We are looking for people to improve the experience of the frontend website for uasatucla.org. If you would be interested, here is a link to the Github for the new version of the website.

To run the website locally...

git clone https://github.com/uas-at-ucla/www2.0.git
npm run watch

Open localhost:8080 in your browser. You should be able to update the code, and the frontend interface will automatically recompile/update. For any update, submit them as a pull request to www2.0.

Features we want to add

  • Team member page, with links to all member's Github/LinkedIn/Resume/etc. Example
  • Drone showcase page Example
  • Recruitment page Example
  • Sponsor page Example 1 Example 2
  • General site layout cleanup + user experience improvements

Feedback Form

Please fill out this Google form with your feedback about this workshop. Since this is the first year that UAS@UCLA is allocating hours training new members with workshops, we always want your feedback. The feedback you give will help Leadership figure out how to improve workshops.

Reminders

ACM AI General Meeting is tomorrow at 6:00 PM in the Northwest Campus Auditiorium. See the Facebook event for more details.

ECE Career Fair is next Monday (10/15/18) between 10:00 AM - 3:00 PM in Engr IV.

Computer Science Career Fair Night is next Tuesday (10/16/18) at 7:00 PM in Ackerman.

Engineering Fair Day 1 is next Wednesday (10/18/18) between 11:00 AM - 4:00 PM in Ackerman.

Engineering Fair Day 2 is next Thursday (10/18/18) between 11:00 AM - 4:00 PM in Ackerman.

Next General Meeting is next Thursday (10/18/18) at 6:00 PM in Engr IV 38-138.

Bazel and System Design Workshop will follow after the general meeting at around 6:45 PM.

Free Time

Please ask questions!

Additional Resources