Tutorials By Nick

Raspberry Pi Code Deployment

Thu, 19 Jul 2018 00:00:00 -0400

Pololu wrote some code to interface the Raspberry Pi with the Arduino. It uses a Python web server to host a webpage on the Raspberry Pi. When it’s connected to your network, you can go to its IP address, and interact with the web page. Then, the Python web server sends and receives information from the Arduino over the I2C bus. Both the Raspberry Pi and the Arduino are connected with a few wires to make the I2C bus, so that they can share information.

The cool thing about this setup is that you can edit the Python web server quickly to change the web page without uploading to the Arduino with a USB cord (This takes some time). You could have new robot scripts just by editing what commands are sent to the Arduino, or by introducing a camera to dynamically recognize and follow objects!

Pololu’s guide has you download the Python code onto the Raspberry Pi and start running the server. This is great for setting up one time, but if you want to do a series of quick edits you’ll need some way to automate deploying code.

The process consists of

Logging into the server using SSH, a secure computer control protocol
Downloading code
Restarting the service

We can make that into one Python script that is run from another computer using Fabric. I think their website says what it is best: “Fabric is a high level Python (2.7, 3.4+) library designed to execute shell commands remotely over SSH, yielding useful Python objects in return.”

A Connection from the library lets you execute shell commands on the server.

# pi is the default username on the Raspberry Pi
# the number is the IP address of the Raspberry Pi
c = Connection("pi@192.168.1.109")

# This lists all the files in the home directory on the server
c.run("ls")

What we want to do is transfer files from our computer to the Raspberry Pi, then run a command to restart the Python code.

On the Getting started docs, there is a command, Connection.put(file), for transferring files. Because there are many Python files that make up the server functionality, I checked the put() docs which lead to the Transfer.put() docs. Unfortunately it seems that Transfer.put() or put() doesn’t support uploading files, so we have to implement that ourselves.

I was honestly too lazy to make a function to open a folder and manually upload each file, so I decided to compress the folder into a single file, then upload that. I knew of the Linux tar command, but I didn’t know exactly what arguments to provide so I used the man command in the shell, and judicious Google.

Here’s what I found out:

tar -cf archive.tar folder/ puts the folder/ into a compressed archive named archive.tar
tar -xf archive.tar -C folder/ extracts the compressed files from archive.tar and puts it in folder/

So the process for uploading a folder should look like this:

Make a compressed archive of the folder locally
Use the put() command to upload the compressed archive
Use the run() command on the Connection to extract the folder from the compressed archive
Delete the compressed archive locally
Delete the compressed archive stored on the server

From the Fabric docs, I learned that Fabric internally uses this library called Invoke to run commands, and Fabric does the SSH remote server stuff. I can use the run() command from Invoke to make the local archive and delete it.

This is the function I ended up with for uploading folders:

def upload(c, folder, destination):
    # Make a compressed archive locally
    run("tar -cf test.tar " + folder)

    # Put the compressed archive on the server at the destination
    c.put("test.tar", remote=destination + "test.tar")

    # Extract the archive's files into the destination folder
    c.run("tar -xf " + destination + "test.tar -C " + destination)

    # Delete the remote archive
    c.run("rm " + destination + "test.tar")

    # Delete the local archive
    run("rm test.tar")

Now all that needs to be done is run the upload() function, and restart the Python code. Running the shell command to restart the code requires sudo administrator priviledges, so I copied the sudo helper code from the Fabric docs to ask me for my password then securely use it on the server.

# Asks the user for the password, then safely stores it 
# Later when we restart the server it uses the sudo password
sudo_pass = getpass.getpass("What's your sudo password? ")
config = Config(overrides={'sudo': {'password': sudo_pass}})

# Had to setup a ssh key for this to work
c = Connection('pi@192.168.1.118', config=config)

# Upload the src/ folder to /home/pi/tank-drive/
upload(c, "src/", "/home/pi/tank-drive/")

# Uses the sudo password to get administrator priviledges
# Restarts the server like in the Pololu guide
c.sudo("systemctl restart a_star_slave")
c.sudo("systemctl restart a_star_heartbeat")

Hope you enjoyed it! The next post will focus on designing simple 3d printed gears using OpenSCAD.

State Machines and Movement

Wed, 18 Jul 2018 00:00:00 -0400

I want my robot to move autonomously, and that means multiple movements. In my head, it makes sense to say, “Move forward 5 feet. Turn 90 degrees. Move forward 2 feet.” But, unfortunately, my robot can’t understand that yet.

To see how we should implement movement for the robot, we first need to know about how Arduino programs work. Each program has an setup() function and a loop() function and the programming language is C++. The setup() function runs once when the microcontroller turns on, and the loop() function runs again and again until the battery dies or you put it out of its mercy.

The code below is what we ended up with last time. Some custom encoder handling code (not shown here), and a way to update the Raspberry Pi with the encoder count. In embedded programming, the master is the device that initiates and manages the communication, while the slave is the one receiving and doing what the master says. In our case, the Raspberry Pi is the master and the Arduino is the slave. Here we update the buffer of what the slave can send to the Raspberry Pi should it ask for it.

void setup() {
    // Initialize encoders
    left_encoder.init();
    right_encoder.init();
}

void loop() {
    slave.buffer.leftEncoder = left_encoder.getEncoder();
    slave.buffer.rightEncoder = right_encoder.getEncoder();
}

So let’s try and apply our ‘Move forward, turn, move forward’ logic from before:

void loop() {
    slave.buffer.leftEncoder = left_encoder.getEncoder();
    slave.buffer.rightEncoder = right_encoder.getEncoder();
    moveForward();
    turn();
    moveForward();
}

This seems to work, but what if we need to get values from the encoder during the movements to get the robot’s position?

void loop() {
    slave.buffer.leftEncoder = left_encoder.getEncoder();
    slave.buffer.rightEncoder = right_encoder.getEncoder();
    moveForward();
    slave.buffer.leftEncoder = left_encoder.getEncoder();
    slave.buffer.rightEncoder = right_encoder.getEncoder();
    turn();
    slave.buffer.leftEncoder = left_encoder.getEncoder();
    slave.buffer.rightEncoder = right_encoder.getEncoder();
    moveForward();
}

That’s a little better, but it’s still only updating every movement, and we may want to be able to react to changes inside of the movement. The robot could potentially hit a rock and move off its path ever so slightly and we would only be able to correct at the start of another movement. With a style like this, the errors from each movement compound to move the robot off the intended path – they can’t really be corrected as they happen.

So, how do you fix this? A dramatic answer to that question is you don’t use loops, only the loop() function. You also use switch statements to determine what movement you are on. The purpose of not using any loops is so that after every command to the motor, the loop() function finishes, and the encoder values are updated. This ensures that sensor values that determine how the robot should execute the movement are continuously updated and ‘fresh’.

int current_action = 0;
void loop() {
    slave.buffer.leftEncoder = left_encoder.getEncoder();
    slave.buffer.rightEncoder = right_encoder.getEncoder();

    switch (current_action) {
        // Moving forward
        case 0:
            break;

        // Turning
        case 1:
            break;

        // Moving forward again
        case 2:
            break;
    }
}

The example should read as

Update the encoder values
If the current action is the first one, do this.
Else, if the current action is the second one, do this.
Else, if the current action is the third one, do this.

Then after those functions, the loop function has finished executing, and will be immediately called again to start the sense, update, run process again.

Okay, so now let’s flesh out the case statements a little more, with code that will actually do things.

One way to use the encoders with the robot’s movement is by checking if their current value is above a certain target encoder count. So some pseudo-code would be

if (encoders < target) {
    move();
} else {
    stop();
    current_action = next_one;
}

Now let’s translate the pseudo-code into each of our different cases. For moving forward, we have to account for the encoders of the left and right motors. For turning, we have to make one of the encoder targets negative, and make that motor move in the opposite direction.

To calculate the targets, we can use the calculated proportion of about 160 ticks/inch to convert our distance into inches. We want to move 12 inches, so that’s 1920 ticks or about 2000.

case 0:
    if (slave.buffer.leftEncoder < 2000 && slave.buffer.rightEncoder < 2000>) {
        motor.setSpeeds(200, 200);
    } else {
        motor.setSpeeds(0, 0);
        current_action = 1;
    }
    break;

case 1:
    if (slave.buffer.leftEncoder < 4000 && slave.buffer.rightEncoder > 0) {
        motor.setSpeeds(200, -200);
    } else {
        motor.setSpeeds(0, 0);
        current_action = 2;
    }
    break;

case 2:
    if (slave.buffer.leftEncoder < 6000 && slave.buffer.rightEncoder < 2000) {
        motor.setSpeeds(200, 200);
    } else {
        motor.setSpeeds(0, 0);
    }
    break;

As you may be able to tell, this code is a little repetitive. Thankfully, we can make functions that drive the robot by taking in a target tick distance input, and returning whether we have completed the movement or not to move onto the next state.

bool driveForward(int target) {
    if (slave.buffer.leftEncoder < target && slave.buffer.rightEncoder < target) {
        motor.setSpeeds(200, 200);
        return false;
    } else {
        motor.setSpeeds(0, 0);
        return true;
    }
}

What this code is saying is:

If we aren’t at the target yet, drive forward, and say we aren’t there yet.
If we are at the target, stop moving, and say we are there.

However, this assumes that the encoder targets are the same value for both motors, but for the 3rd case they aren’t. What we can do is have a case in between the commands to reset the encoders to 0. This way every command can assume the target is the same without relying on the previous command’s target. Let’s write a quick reset encoders command, then put it together.

void resetEncoders() {
    left_encoder.value = 0;
    right_encoder.value = 0;
}

We can now remove the drive forward commands, and add the one we made with a function. :)

case 0:
    if (drive(2000)) {
        current_action++; // move to the next command
    }
    break;

case 1:
    reset_encoders();
    current_action++;
    break;

case 2:
    if (slave.buffer.leftEncoder < 2000 && slave.buffer.rightEncoder > -2000) {
        motor.setSpeeds(200, -200);
    } else {
        motor.setSpeeds(0, 0);
        current_action = 2;
    }
    break;

case 3:
    reset_encoders();
    current_action++;
    break;

case 4:
    if (drive(2000)) {
        current_action++;
    }
    break;

case 4:
    // Do nothing. We are finished! :)
    break;

You could write a function for the turn command, so that it’s easier to turn the robot again later. Another way to improve this could involve making an object oriented system. With that, you could put the list of commands you want your robot to execute into an array. Then each loop the robot would work on executing the current command in the array.

This certainly isn’t the only way to write a state machine. It’s just a convenient one for getting started programming in robotics. If you want more information, be sure to check out Finite-state machines on Wikipedia.

Next post will be on quickly deploying code to the Raspberry Pi. See you then!

Adding Encoders

Tue, 17 Jul 2018 00:00:00 -0400

Hello again! Today, I added these encoders onto my motors. The holes for soldering the data wires are really small, so I suggest using a magnifying glass if you have one.

With the electrical stuff done, I focused on connecting the wires to the A-Star Robot Controller. I figured my first order of business was figuring out what pins were available to use on the microcontroller to read the input from my encoder, and what sort of format the encoder uses to convey the position of the motor shaft.

After researching some in Google, I found this link describing how encoders work and how to write code to read them. I won’t go into too much detail here because that article does a good job of explaining, but I have an incremental encoder. It uses 2 wires to communicate whether the motor’s shaft has shifted clockwise or counter-clockwise one “tick”. A tick is some division of the shaft like degrees in a circle.

Depending on the encoder, it could be a thousand ticks to rotate one full revolution. So, if your robot is traveling fast, the microcontroller may have to read pins the encoder wires are attached to thousands of times a second. Because the microcontroller is busy doing other work you need to “interrupt” it, so that any time one of those two wires changes, it’s ready to decode the signal and increment or decrement the motor’s position.

Luckily, Pololu has this handy User’s Guide where they document what resources are used on the microcontroller, the pinout, and other helpful information. They had the following graphic on their site:

So, I’m looking for 4 pins for the 2 encoders on the microcontroller that are interrupts (INT). Pins 0-3 are available, but 2 and 3 are used for Raspberry Pi communication. 0 and 1 are used for UART communication, and the gyro sensor I bought for measuring the angle can use either UART or I2C to transfer data. Pins 7-11 are interrupts, but 9-11 are taken up for UART and motor control. The only interrupt pins left are 14-17, and they’re right next to each other! Even though those pins also serve as SPI communication protocol pins, I don’t have a use for SPI, so I’ll use those pins for the encoders.

After writing the code for the encoders based on the tutorial I linked, I modified Pololu’s example to send the encoder data over the I2C link to the Raspberry Pi to display on the website. A good check to see if the encoders work is to calculate how many encoder ticks are in one full wheel revolution and see empirically if the measured encoder counts match.

The encoder’s page states that the encoder has 12 CPR (counts per revolution) or 12 ticks per revolution. The motor I bought has a extended shaft on the back that turns at the speed before the gearbox reduces it. With a 150:1 gearbox ratio, every turn of a wheel attached to the motor results in the encoder turning 150 times. This means that every wheel revolution is equivalent to 150 * 12 ticks or 1800 ticks because of the gearbox.

Good news! Turning the wheel one full revolution results in approximately 1800 ticks. :)

Another experiment worth doing is testing how many ticks results in a certain distance traveled. I bought 90 mm diameter wheels, which have a circumference of 11.12 in. There are 1800 ticks in a complete wheel revolution and the wheel should travel 11.12 in. 1800 ticks / 11.12 in is about 162 ticks / in. When I tested this movement, I got closer to 158-160 ticks / inch. This could be due to the wheel’s grip, or the weight of the robot, or just the encoders being off. Most likely, this small discrepency is due to the user’s error with measurements. :)

Next post will focus on actually getting our robot to do things with state machines!

Buying Robot Parts

Wed, 27 Jun 2018 00:00:00 -0400

Swerve drive is a fantastic omni-directional drive train. It can go in any direction at any time with full speed. Go ahead and watch the video above. I’ll wait.

Wasn’t that amazing? A swerve drivetrain has 4 independent swerve modules that change the direction the wheel faces and the speed of the wheel at the same time. It allows for complex maneuvers like you saw in the video. I want to build a swerve drive so that I can understand how it works, what code is required, and because I’ve always wanted to build one.

Honestly, making a artisan, hand-crafted swerve drive made from scratch is quite a daunting undertaking. The following major skills seem to be required:

CAD
- Computer aided design software which lets the user model their design or robot without having to draw lots of 3d models on paper
Embedded programming
- You may be familiar with traditional programming which focuses on things inside a computer, but embedded programming is used when programming a smaller computer called a microcontroller which is slower and less powerful, but has real time access to input and output to the real world like LEDs or switches or motors.

Last year, I was on FTC Team 731 as the lead programmer. FTC, or First Tech Challenge, is a high school robotics sport that lasts for the latter half of the school year. Our robot had to be able to place these foam blocks in a vertical grid within an operator-controlled (called Telop, for 2 minutes) and autonomous portion (30 seconds, not very long at all!) of the match. I linked a video of our robot below.

During the competition, I spent most of my time trying to work through issues surrounding the control system and the lag that occurred when sending commands to the robot. This made it hard to achieve more accurate positioning. It was frustrating, but it’s also part of the reason why I’m so inspired to take on this project so that I get some “real world” experience and a chance to apply some of the skills I learned.

Because swerve drive is a really challenging drivetrain to make from a mechanical and programming standpoint, I figured I would get my feet wet by starting with a mostly built robot robot kit, and learning a few things along the way. On a Pololu sale, I found this gem:

It’s a robot kit with software already made to control most of it and a tutorial on how to build it. I liked the idea of using a Raspberry Pi as a high level controller that could handle regular computer programs and processing. It could host a web server and use a webcam with computer vision techniques to recognize items in the real world and send movement commands to the robot. It also would allow for any device with a web browser to control the robot like shown in the video. The microcontroller is a Atmega 32u4 8 bit microcontroller, which is like a regular computer processor but it’s slower and more focused on the electronics control side.

I decided to get these motors instead because they had a shaft on the end of the motor. That way I can install this encoder on the back of the motor. Encoders measure the rotations of the shaft when it moves forward and backward. If you know the wheel circumference, you can determine the distance that the robot has traveled with it’s measured rotations. You can also determine the speed of the robot by using the rate of rotation of the motor. Encoders make a lot of sense for my project because I want to accurately control the speed of motors and the autonomous functionality of the robot.

For the Raspberry Pi, I chose to get the latest version (Raspberry Pi 3) instead because it would offer more processing power for computer vision tasks and machine learning if I need it.

My eventual vision for this project involves a Raspberry Pi and camera for sensing objects which communicates with the internet and controls the microcontrollers, multiple microcontrollers for controlling the motors and providing a high level motion control interface to the Pi. Oh, and the drivetrain would be swerve drive of course. :)

I’ll try to post a build log of my efforts in a semi-tutorial fashion. Stay tuned as I write up more on how to build a robot!

Android Studio FTC Tools: Making common tasks easier and faster

Tue, 19 Sep 2017 00:00:00 -0400

In Android Studio, there is a feature called External Tools. This adds links under the Tools->External Tools header that runs command line programs. Why is this useful for FTC? We can add commands that let us easily connect to the robot over wireless, upload code wirelessly and update the Driver Station’s app quickly.

Table of Contents
Restarting ADB Tool
Connecting over Wifi Tool
Actually Connecting over Wifi
Install Driver Station Tool
Actually installing the Driver Station
The End

Go to File->Settings and search for external tools in the search box in the top left. A screen like below should show up.

I have already made my tools, but to add a tool click the green +.

Restarting ADB Tool

This is the tool that will restart ADB to use over the network. Enter in information like I did below:

So there are a lot of fields here, but the most important ones are

Name
- This is the name of your tool
Program
- This is the program being called
- We are calling adb which stands for Android Debug Bridge. Internally Android Studio uses this to upload your app apk install files over usb
Parameters
- These are the things passed to the program
- Here we are telling adb what port to restart on and what port it will use to connect to the phone
Working directory
- This is where the directory where the program is called from

There are also some weird $’s inside of the program:

$ModuleSdkPath$
- This means where the Android SDK is (which is where adb is located)
$ProjectFileDir$
- This is the current project’s directory

Connecting over Wifi Tool

This tool will actually connect over wifi from your computer to the phone.

Inside the Parameters, you tell adb to connect to a certain IP address and port. The port is the one we specified earlier, and the IP address is the identifier used to find the Robot Controller on the network. You’ll need to change this to whatever IP address is listed under the Robot Controller’s About page which is under the menu button in the top right.

Actually Connecting over Wifi

To connect to the phone wirelessly and update code, you need to connect to the phone’s wifi network first. On one of the phones click the menu icon in the top right corner and click About. The phone’s wireless network name and password should be displayed. The IP address of the Robot Controller should also be displayed. If it isn’t on that phone try either the other Driver Station or Robot Controller in the pair. Then once you’ve done that, connect the Robot Controller to the computer. Now you’d use the Tools->External Tools->Restart ADB tool and a small window at the bottom of Android Studio should pop up. Once that has finished working, unplug the phone from your computer. Then run the Tools->External Tools->Connect over Wifi tool and it should show your phone as connected! :)

Install Driver Station Tool

Sometimes when the FTC SDK updates, bugfixes are released or helpful updates are added. When this happens, we need to update the Robot Controllers code, and the Driver Station app. Helpfully, FTC keeps the Driver Station app apk installer file inside of YourProjectNameFolder/doc/apk/FtcDriverStation-release.apk. We can also use adb to install programs! Let’s make the tool to do this:

Actually installing the Driver Station

Now to update the Driver Station, all you have to do is

Uninstall the current version of the Driver Station app from the phone
Connect the Driver Station phone to the computer
Check allow this computer always on the phone so that we are allowed to install it
Click on Tools->External Tools->Install Driver Station
It should be updating now!

The End

These features may take a bit to set up, but they pay off in the long run with the time they save. You’ll save lots of time not having to download the Driver Station from the app store, and plugging and unplugging your Robot Controller constantly from the computer. You’ll also save your usb port some stress and make it last longer.

Using Github Pages

Thu, 14 Sep 2017 00:00:00 -0400

Github Pages is a service that Github offers which hosts websites for you. There is an option for either generated websites (like this one) using Jekyll, a website generator. Generated websites are websites where there is for example a blog post template and you just write your post in a text box and then the generator makes the static webpages. There is also an option for hosting non-generated static webpages like in my HTML and CSS Basics tutorial. In this tutorial, we will learn how to host non-generated static webpages using Github Pages. You should have already read my tutorial on Github Basics and have Visual Studio Code installed.

First you create a repository on Github Desktop like in my Github Basics tutorial. Then, open the repository folder from the repository you created earlier:

In my case, the repository folder name is my-first-app.

If you hover over the folder name, some icons should pop up like below.

Click the first icon, which creates a new file, and make a file named .nojekyll. This tells Github Pages that your repository is a simple static page one and not a Jekyll one. Press Enter to save the file.

Now in Github Desktop, we can commit the files to git and push them to the server:

Now go to your Github repository on the Github website. My repository name is my-first-app and my username is nicholasday, so the url for me would be github.com/nicholasday/my-first-app.

Click on the Settings link, and scroll down until you see Github Pages Settings header.

Click on None and select the master branch option. What this does is build your Github Pages website from your master branch rather than a different branch that you have created.

Don’t forget to save your selection!

The page should reload and if you scroll back down to Github Pages Settings there should be a website link. For me it’s https://nicholasday.github.io/my-first-app/.

Previously, in my Github Basics tutorial we created a file called test.txt. So we go to the url they showed us earlier, and add /test.txt. The url would then be https://nicholasday.github.io/my-first-app/test.txt. As you can see VSCode and the website both have the same page!

If you want something to show up when you just go to a folder, place an index.html file in that folder. So if we want something to show up when we go to https://nicholasday.github.io/my-first-app/, we create an index.html in the base repository folder. Then, all you have to do is commit it to Github and push it to their servers. It should show up almost immediately on your website.

Feels good, right? You can now show people your work by sending them a nice link!

Canvas: Physics and Keyboard Handling

Thu, 14 Sep 2017 00:00:00 -0400

Previously, we had gone over Javascript Animation Basics. In this tutorial, we will make our ball bounce around inside of the canvas element. We will also use the keyboard to control the movement of the ball. Let’s get to it!

Table of Contents
“Physics”
Keyboard Handling
Advanced Keyboard Handling

“Physics”

Our goal here is for the ball to change velocity when it hits the side of the canvas rather than keep going off infinitely. Because we have a x and y coordinate position for the ball, we can determine when it has gone past the boundaries of the canvas. For this we will use if statements to check whether the ball is outside of the canvas. We also create two variables called vx and vy which is the velocity of the ball in the x and the y axis respectively. if statements are read in your head like if (condition) is true then run the code inside of the {}’s.

var x = 0
var y = 0
var vy = 10
var vx = 10

function draw() {
    context.clearRect(0, 0, myCanvas.width, myCanvas.height)
    x = x + vx
    y = y + vy
    if (x > myCanvas.width) {
        vx = -vx
    }
    if (y > myCanvas.width) {
        vy = -vy
    }
    context.beginPath()
    context.arc(x, y, 10, 0, 2*Math.PI)
    context.closePath()
    context.fill()
    requestAnimationFrame(draw)
}

draw()

Now the ball should bounce back after hitting the edge of the screen! :) But, it keeps going past the other side now. :( What we need to do is check if the ball has gone past the top left corner of the screen which is (0, 0). We can change the if statements to say if the ball is past the bottom right corner, or if the ball is past the top left corner, change the velocity. We do that by changing our condition to (past bottom right corner || past top left corner).

if (x > myCanvas.width || x < 0) {
    vx = -vx
}
if (y > myCanvas.width || y < 0) {
    vy = -vy
}

Yay! It should bounce back and forth now. :)

Keyboard Handling

Now, let’s modify our program to use the keyboard to control the movement of the ball. Take out where the velocity is automatically added to the position of the ball because we want the keyboard to handle that.

var x = 0
var y = 0
var vy = 10
var vx = 10

function draw() {
    context.clearRect(0, 0, myCanvas.width, myCanvas.height)
    if (x > myCanvas.width || x < 0) {
        vx = -vx
    }
    if (y > myCanvas.width || y < 0) {
        vy = -vy
    }
    context.beginPath()
    context.arc(x, y, 10, 0, 2*Math.PI)
    context.closePath()
    context.fill()
    requestAnimationFrame(draw)
}

draw()

Next, we add an event listener to the html page. We do that with the document.addEventListener() function. It takes the event name as input, along with the function that you want it to run every time that event happens. For us, we would use the keydown event because we want to be able to tell when a key on the keyboard has been pressed. That looks like this:

document.addEventListener('keydown', function(event) {
    console.log(event)
})

The function provided to document.addEventListener() takes the event as an argument. This event has information like what key was pressed, which we can use to determine whether to move the ball left, right, up, or down. console.log takes any kind of input and prints this out to the browser’s console. To see the console, right click on the webpage, click Inspect, then click Console. What you log with console.log() should show up in the window that pops up.

So, you might be wondering… Nick, how do we tell what key we pressed? Good question :) We can use those if statements that we just learned to tell what the key is named. Go back to your webpage and press keys. You should notice in the console there is a event.key variable. When you press the left arrow key, event.key is ArrowLeft. For the right arrow key, event.key is ArrowRight. ArrowUp for the up arrow key, and you guessed it ArrowDown for the down arrow key.

document.addEventListener('keydown', function(event) {
    if (event.key == "ArrowRight") {
        console.log("right key pressed")
    }
    if (event.key == "ArrowLeft") {
        console.log("left key pressed")
    }
    if (event.key == "ArrowUp") {
        console.log("up key pressed")
    }
    if (event.key == "ArrowDown") {
        console.log("down key pressed")
    }
})

We use == rather than = because == checks if two things are equal, and = changes a variable. In the console you should see the “left key pressed” when you press the left arrow key, “up key pressed” for the up arrow key, etc.

So then, we can directly change the position inside of this event listener we created:

var x = 0
var y = 0
var vy = 10
var vx = 10

document.addEventListener('keydown', function(event) {
    if (event.key == "ArrowRight") {
        x = x + vx
    }
    if (event.key == "ArrowLeft") {
        x = x - vx
    }
    if (event.key == "ArrowUp") {
        y = y - vy
    }
    if (event.key == "ArrowDown") {
        y = y + vy
    }
})

function draw() {
    context.clearRect(0, 0, myCanvas.width, myCanvas.height)
    if (x > myCanvas.width || x < 0) {
        vx = -vx
    }
    if (y > myCanvas.width || y < 0) {
        vy = -vy
    }
    context.beginPath()
    context.arc(x, y, 10, 0, 2*Math.PI)
    context.closePath()
    context.fill()
    requestAnimationFrame(draw)
}

draw()

Advanced Keyboard Handling

Wowzers! Your code should now let you move the circle around the canvas! But wait… when you press and hold down an arrow key, the movement is jerky and doesn’t look as nice as it should. Also, you can’t press two keys at the same time to move the circle. You can only move the circle in one direction at a time. :( Let’s fix that. What we want is to move the circle when a key is pressed in that direction and stop moving the object when the key is released. We can use the keyup event to tell when the key has been released. :) Isn’t the browser great? So what we can do is say hey this key is pressed inside of a variable when the keydown event fires and change that variable to say the key is not pressed when we get the keyup event.

var leftPressed = false
var rightPressed = false
var upPressed = false
var downPressed = false

document.addEventListener('keydown', function(event) {
    if (event.key == "ArrowRight") {
        rightPressed = true
    }
    if (event.key == "ArrowLeft") {
        leftPressed = true
    }
    if (event.key == "ArrowUp") {
        upPressed = true
    }
    if (event.key == "ArrowDown") {
        downPressed = true
    }
})

document.addEventListener('keyup', function(event) {
    if (event.key == "ArrowRight") {
        rightPressed = false
    }
    if (event.key == "ArrowLeft") {
        leftPressed = false
    }
    if (event.key == "ArrowUp") {
        upPressed = false
    }
    if (event.key == "ArrowDown") {
        downPressed = false
    }
})

You should see that we are using these weird true and false values rather than numbers or strings. true and false are boolean values. For a boolean variable, its value can be either true or false, and we can use them in if statements. So if leftPressed is true, then subtract the x velocity from the ball’s position. if rightPressed is true add the x velocity to the ball’s position, and so on for up and down. We put this inside of the draw() function because we want it to run every time the ball is drawn. We can’t use the keyup and keydown events because they only run when the key is first pressed up or released and then infrequently. We want smooth motion while the key is pressed.

var x = 0
var y = 0
var vx = 10
var vy = 10

var leftPressed = false
var rightPressed = false
var upPressed = false
var downPressed = false

document.addEventListener('keydown', function(event) {
    if (event.key == "ArrowRight") {
        rightPressed = true
    }
    if (event.key == "ArrowLeft") {
        leftPressed = true
    }
    if (event.key == "ArrowUp") {
        upPressed = true
    }
    if (event.key == "ArrowDown") {
        downPressed = true
    }
})

document.addEventListener('keyup', function(event) {
    if (event.key == "ArrowRight") {
        rightPressed = false
    }
    if (event.key == "ArrowLeft") {
        leftPressed = false
    }
    if (event.key == "ArrowUp") {
        upPressed = false
    }
    if (event.key == "ArrowDown") {
        downPressed = false
    }
})

function draw() {
    context.clearRect(0, 0, myCanvas.width, myCanvas.height)
    if (x > myCanvas.width || x < 0) {
        vx = -vx
    }
    if (y > myCanvas.width || y < 0) {
        vy = -vy
    }

    if (leftPressed) {
        x = x - vx
    }

    if (rightPressed) {
        x = x + vx
    }

    if (upPressed) {
        y = y - vy
    }

    if (downPressed) {
        y = y + vy
    }
    context.beginPath()
    context.arc(x, y, 10, 0, 2*Math.PI)
    context.closePath()
    context.fill()
    requestAnimationFrame(draw)
}

draw()

Fantastic job! Now your ball should be controllable by your arrow keys. :)

Github Basics

Thu, 07 Sep 2017 00:00:00 -0400

Github is a place where many people put their code. Github hosts git servers for you, git servers serve git repositories. Git repositories are basically folders that you put code in, but they have some special features. They let you share them on sites like Github or Bitbucket and store the complete history of the files you put in there and the changes you’ve made to them. It does this by looking for the differences between your original files and your new changes everytime you make a commit (referred to as diffing). Diffing also allows other people to collaborate on your code easier than before because every person sees the changes everyone makes. Commits save your changes into git and do this diffing process. When you push your code you’re uploading to a git server, and when you pull you’re download from a git server. That was a lot of jargon so let’s see it in action.

Table of Contents
Setting up Github for Desktop
Creating your first repository
Making your first commit
Publishing your Repository
Pushing and Pulling
Your History
The End

Setting up Github for Desktop

Github Desktop is an easy interface to the git program and Github itself, so we’ll use it.

First, download Github for Desktop. Once you install it, the following window should pop up:

Click Sign into Github or Create your free account if you don’t have one.

Creating your first repository

Once you’re signed in a screen like below should show up. This name and email will show up when you contribute to a project.

Now Github Desktop should look like this:

You’re ready to create your first repository! Click on Create new repository and then select a folder to put your repository in. Usually the default option is fine, but you’ll have to remember where it’s stored so you can edit your code inside of your repository folder. In my case, the repository is located at /home/nicholas/downloads/Github/my-first-app. When you clone a project that means download for the first time onto this computer.

You can switch repositories by clicking on the dropdown at the top.

Making your first commit

A commit is a change saved into the git repository’s history. Add a code file you’d like to put in the repository by copying and pasting that file into your code repository folder. You can also just edit a new file in that folder.

Inside of Github Desktop, you should see the changes you just made. You can select what changes will be committed and what will be left out of the commit to be changed later. At the bottom you can provide a summary and description of the changes you made. When you click Commit to Master, your change is saved in the master branch. Branches are like branches on trees. They all stem from the master ‘tree’ and can diverge from it. So you can make changes in a fixallthebugs branch that won’t affect the master branch and then later you can merge fixallthebugs into master once the bugs are all fixed. For most projects though, just using the master branch is good enough.

On the right is a ‘diff’. This shows a line by line summary of the changes that you’ve made to the selected file.

Publishing your Repository

Before we do anything, let’s publish our repository to Github. Click the Publish repository button, and make sure to uncheck keep this code private unless you want to pay Github for a private repository (public repositories are free by default). If you’re a student with an edu email, you can sign up for the Github Student Developer Pack which has free private repos, and some free server hosting credits.

Pushing and Pulling

If you want to share your changes or back them up, you can push to origin. Origin is the main server that you’ll use for git, but there can be other servers that you can push to. Like if you wanted to push to another server and it would put your code onto a website and deploy it. Github Desktop has a handy button for that at the top.

Pulling and fetching download code from the server onto your computer and can merge the code from the server with your code. This is handy if you want to backup your code, move computers, or collaborate with other people.

Your History

Next to the History tab, there is a tab for the history of your repository. When you click on it, you should be able to see a log of all the the commits you have made and their diffs.

You can also right click on a commit and revert it. This will undo your changes in the commit. Its a very handy feature for when you make a mistake and want to undo it, even a few commits later. Its important to commit small working changes for this purpose.

The End

There is a lot more to git and Github than I went over here, but this should be enough to get you started. Git is a very advanced tool and there are lots of gotchas and ways to use it, but you should only add complex features when you actually need them. Not when you think it is cool, but when you have a need for it.

FTC Basic Teleop

Tue, 05 Sep 2017 00:00:00 -0400

FTC programming contains lots of concepts that are very specific to robotics and not regular programming. In this tutorial I plan to cover some of those concepts and basics. This tutorial will show how to create basic OpModes for Teleop. I’ll assume you have some basic knowledge of the FTC hardware.

Table of Contents
Getting Set Up
Creating your first OpMode
Actually Doing Stuff with Teleop
Joysticks

Getting Set Up

You should have Android Studio and the FTC SDK downloaded. Here is a good tutorial on how to do that. Open up the SDK inside Android Studio, You may see a notification like this:

Click Update to make sure you’re on the latest version. Another error may pop up like below. You should click the links for Update Build Tools.

A status bar like below shows the status of your program compiling or uploading to the phone.

Next you should disable Instant Run in Android Studio because sometimes it stops new OpModes from showing up on the phones, and occasionally stop OpModes from updating with new code. Go to File->Settings in the toolbar and search for instant run and make sure it’s unchecked.

Creating your first OpMode

The SDK FIRST developed is a library of code that you can use to control your robot. Basically it’s just a folder with many files that have code inside of them.

On the left in Android Studio there is a list of the files inside of the SDK. It’s similar to a file manager, but specifically for Android code. The OpModes you’ll write go inside of TeamCode -> java -> org.firstinspires.ftc.teamcode. To create a new OpMode right click on the org.firstinspires.ftc.teamcode folder and select new -> Java Class. A window should pop up, but all you’ll need to enter is the name of your OpMode. I chose MyFirstOpMode. A file with something similar to the following code should show up:

package org.firstinspires.ftc.teamcode;

/**
 * Created by nicholas on 9/5/17.
 */

public class MyFirstOpMode {
}

Within the SDK, FIRST made a class called OpMode. Classes are blueprints, and objects are new things created from those blueprint templates. Inside of the OpMode class are functions and variables that you can use to run your code on the robot. To use these functions and variables FIRST made, we extend from FIRST’s OpMode class. This means that our MyFirstOpMode class has all of the stuff FIRST’s OpMode has, and our new stuff. An important thing to know is that the stuff in our class won’t modify the stuff in FIRST’s blueprint. extend copies the stuff from FIRST’s class blueprint into our blueprint. We use extend like this:

public class MyFirstOpMode extends OpMode {
}

A red line like a grammar error should show up under the public class… line. This means that Android Studio has found an error in our program. Android Studio doesn’t catch all errors, but only ones that stop the program from running in the first place. It doesn’t catch errors in programmer logic :(

If you hover over red lines, you should see the error. In this case, the error is Class 'MyFirstOpMode' must either be declared abstract or abstract method 'loop()' in 'OpMode'. Don’t worry! Errors are hard to read, but you’ll learn how. Basically it’s saying that your class needs to implement the loop() method for this to work. Let’s implement that:

public class MyFirstOpMode extends OpMode {
    public void loop() {

    }
}

Now there should be a new error, but this time it mentions implement and init(). We know what that means!

public class MyFirstOpMode extends OpMode {
    public void init() {

    }

    public void loop() {

    }
}

Now no red underlines should show up. Great job reader! :)

Actually Doing Stuff with Teleop

How do we actually do things Nick? I want to control my robot… So, let’s work on Teleop first. To tell the SDK that this OpMode is a Teleop OpMode and not an Autonomous OpMode, we put @TeleOp above the class like so:

@TeleOp
public class MyFirstOpMode extends OpMode {
    public void init() {

    }

    public void loop() {

    }
}

The way OpMode works is that first the code inside init() is run. Then, the code inside of loop() is run over and over endlessly until you press stop on the Driver Station or the autonomous period ends.

Let’s write our Teleop for a tank drive robot with one motor on each side. In the code, we’ll name them left and right. We create two variables with the type DcMotor inside the MyFirstOpMode class, but inside of any functions. You put them inside of the class rather than the functions because when a variable is created inside of the function it is removed when the code inside of the function stops running, and it can’t be accessed by other code outside of the function. Variables inside of the class can be accessed inside of any function and will be removed when the OpMode finishes. As you already know, we want to create the variables left and right inside of the class so that any code inside of the OpMode can access the motors.

The type of a variable is what the variable is. For instance there is an int type for integers, a double type for decimal numbers, a Money type for monetary values, etc.

@TeleOp
public class MyFirstOpMode extends OpMode {
    DcMotor left;
    DcMotor right;

    public void init() {

    }

    public void loop() {

    }
}

Inside of init(), we want to tell the program that this motor variable corresponds to that motor configured on the robot, and this other motor variable corresponds to that other motor configured on the robot. We do this by setting the variables equal to hardwareMap.dcMotor.get("Name of motor configured on phones");.

@TeleOp
public class MyFirstOpMode extends OpMode {
    DcMotor left;
    DcMotor right;

    public void init() {
        left = hardwareMap.dcMotor.get("left");
        right = hardwareMap.dcMotor.get("right");
    }

    public void loop() {

    }
}

Now we get to the fun stuff. :) Actually moving the robot. Variables with the type DcMotor are objects created from the DcMotor class that have functions that can operate the motors. We will use motorname.setPower() to change the power of the motors. motorname.setPower() takes an input from -1 to 1. -1 is full speed in reverse, 1 is full speed forward, .5 is half speed forward, -.25 is quarter speed backwards, etc. An important thing to know is that motors keep going at the same speed you last told them to go at. So what we can do is inside of loop() set the motor powers over and over at different speeds to control the robot.

@TeleOp
public class MyFirstOpMode extends OpMode {
    DcMotor left;
    DcMotor right;

    public void init() {
        left = hardwareMap.dcMotor.get("left");
        right = hardwareMap.dcMotor.get("right");
    }

    public void loop() {
        right.setPower(1);
        left.setPower(-1);
    }
}

We set the left motor to -1 because it is flipped over when compared to the right motor, so going reverse on the left actually moves the robot forward. If you run this code, your robot should go forward, but we can’t control it. :( For this we need joysticks.

Joysticks

In FTC, you can use two gamepads connected to the Driver Station. Inside of your OpMode, those gamepads are variables named gamepad1 and gamepad2 with the type of the Gamepad class. The Gamepad class has variables on it which correspond to whether a button is pressed and the joysticks. The Gamepad joystick variables are gamepad1.left_stick_x, gamepad1.left_stick_y, gamepad.right_stick_x, and gamepad.right_stick_y. Those variables are also on the second gamepad. They are decimal numbers (doubles) which range from -1 to 1 and correspond to either the x axis or the y axis of the joystick movement.

For a basic tank drive, we will have the y axis on the left and right sticks of gamepad1 directly control the speed of the motors since motor.setPower() takes an input from -1 to 1 and the gamepads output values from -1 to 1.

@TeleOp
public class MyFirstOpMode extends OpMode {
    DcMotor left;
    DcMotor right;

    public void init() {
        left = hardwareMap.dcMotor.get("left");
        right = hardwareMap.dcMotor.get("right");
    }

    public void loop() {
        right.setPower(gamepad1.right_stick_y);
        left.setPower(-gamepad1.left_stick_y);
    }
}

We can apply the negative sign to the value from gamepad1.left_stick_y to reverse its direction and ensure the left motor moves the robot in the same direction as the right motor like mentioned earlier.

That’s it! You should be able to press the green play button in the toolbar and upload code to your Robot Controller and run this code on your tank drive. You will need to configure what motor port corresponds to what name on the phones when you hook up the hardware. You will also need to turn on USB Debugging on the phone and allow the computer to connect to the phone first.

Javascript Animation Basics

Fri, 01 Sep 2017 00:00:00 -0400

Javascript is a language that allows you to make interactive websites. Websites that host games, are dynamic applications, or do extensive animation or visualization. It’s very versatile to say the least. We will be making a ball bounce around the screen in this tutorial.

Table of Contents
Annoying Pop Ups
A Blank Canvas
Animating Things!

Annoying Pop Ups

Open up your favorite code editor (I like to use Visual Studio Code). Make a new file and call it something.html. Put a basic html structure like in my HTML and CSS Basics tutorial. It should look similar to this:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Wow animation stuffs!</title>
5 <body>
6 </body>
7 </html>

This time around we are going to add a new tag, <script>. Place it inside of the body tag. The <script> tag is sort of similar to the <style> tag. Inside of the <script> tag we put our Javascript code that we want to execute on our page.

Just to make sure it’s working let’s create a little pop up.

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>Wow animation stuffs!</title>
 5 <body>
 6 <script>
 7 alert("Hello!")
 8 </script>
 9 </body>
10 </html>

If you reload the page, an annoying pop up box should come up. Yay it works! But why alert()? What is it and what does it do?

alert("Hello!") is a function. Functions are blocks of code you can run over and over. They can take some kind of input and give some kind of output but they don’t always. You can tell by how there is a name and two parenthesis right next to it. The name alert itself was chosen by some of the people who originally created Javascript. They handily included functions that are useful for us. Inside of the parenthesis there is "Hello!". This is some input given to the alert function, and with this input the browser makes the alert box with your text inside of it and shows it to you.

A Blank Canvas

Enough of these annoying pop up thingys you say?! Say no more, let’s draw things. For this we will need the <canvas> tag, which should go before the <script> tag and inside the <body> tag. Also, you should give it an id like myBeautifulCanvas.

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>Wow animation stuffs!</title>
 5 <body>
 6 <canvas id="myBeautifulCanvas">
 7 <script>
 8 </script>
 9 </body>
10 </html>

To use our beautiful canvas, we have to let the code know where it is. We can do that with the following piece of code:

var myCanvas = document.getElementById("myBeautifulCanvas")

This is a lot of new information, so let’s go over it. var stands for the word variable. That line creates a new variable with name myCanvas. A variable is sort of like a box that you can use to carry around useful pieces of data and use them over and over. You can also change the item inside the box but keep the box name (variable name) for data that changes. After we name it myCanvas, we have an equal sign and a function. The equal sign means put the piece of data from the right side of the equal sign into the variable box named myCanvas. The function document.getElementById() gives us the element that is uniquely named by an id passed to it as input. We use an id because we want to make sure that we are using only one element. In our case we are getting the canvas element so we can draw on it.

Next, we need to set up the <canvas> element for drawing. To do this we make another variable, context and set it equal to a function on the <canvas> element. The getContext('2d') function initializes the canvas for drawing in 2d. You can also initialize it by giving getContext() input like webgl for 3d drawing, or bitmaprenderer to draw images.

var context = myCanvas.getContext('2d')

To draw a circle, we’ll need 4 functions: context.beginPath(), context.arc(), context.closePath(), and context.fill(). I know this is a lot of functions at once, but they’re not too hard. beginPath() creates the path for drawing. closePath() ends it. arc() draws an arc at some (x, y) pixel coordinate from a certain start angle to a certain end angle with a certain radius. In our case that would be 0 to 2*Math.PI (Math.PI is a variable provided by the browser that approximates pi) because we want to draw all the way around the circle not just a slice of it. fill() draws the path on the canvas and fills it with a color.

Let’s try and put this all together to draw a circle:

var myCanvas = document.getElementById("myBeautifulCanvas")
var context = myCanvas.getContext('2d')

context.beginPath()
// This is a comment
// comments aren't read by the computer and can be used for documentation
// 50, 50 is x, y
// 10 is radius
// 0 is start angle
// 2*Math.PI is end angle
context.arc(50, 50, 10, 0, 2*Math.PI)
context.closePath()
context.fill()

I used comments in the code above to tell you what each of the inputs to the function does. These inputs are usually called arguments by other programmers.

Animating Things!

You may have heard about how movies are just a series of pictures one after the other so fast that your brain thinks you’re watching something moving. It’s true. We will use the same technique here by drawing our circle, erasing it, drawing it again at a different position again and again at high speeds.

To do this, we will create our very first function!

function draw() {
    // yay functions
}

Functions in Javascript are made by typing the word function then the name of said function (draw, in our case). Then some parenthesis and an opening curly bracket and a closing curly bracket. Our code to draw the circle will go inside of the curly brackets that way we can run this function over and over and it will draw our circle over and over.

function draw() {
    context.beginPath()
    context.arc(50, 50, 10, 0, 2*Math.PI)
    context.closePath()
    context.fill()
}

draw()

So you can see we made a function named draw and then we ran it one time. Because we want to run it over and over, we’ll need to use another function named requestAnimationFrame(). This function synchronizes our drawing function with the browsers drawing function that draws all webpages.

We can run requestAnimationFrame() at the end of our draw function and give it the name of our draw function as input. That way the browser will know to call our draw function after we drew our previous circle.

function draw() {
    context.beginPath()
    context.arc(50, 50, 10, 0, 2*Math.PI)
    context.closePath()
    context.fill()
    requestAnimationFrame(draw)
}

Now we should be drawing millions and billions and bajillions of circles over and over each of them on top of each other resulting in the magnificent effect of a single circle on the screen. Great isn’t it? Okay, let’s get that circle moving. You know that to move the circle, you want it to change the coordinates just a little bit each time the circle is drawn. This is the perfect use for a variable! Let’s make one for the x coordinate and one for the y coordinate and start the position at (0, 0). We have to create the variables outside of the draw function because we don’t want the variables to be created from scratch each draw. We want the coordinates to be updated with a slightly different position each time based on the old one.

An important fact to note is that canvas coordinate systems are strange. (0,0) is the top left corner of the canvas and (positive max width, positive max height) is the bottom right of the canvas.

var x = 0
var y = 0
x = x + 10
y = y + 10

So in this block of code we make new variables x and y and set them both equal to 0. Then we set those variables equal to the previous item in the box (0), with 10 added to it (0 + 10). Now 0 + 10 or 10 is stored inside both x and y.

So what we will do now is put the x = x + 10 parts inside of the draw function and use the variables x and y as inputs to the arc() function so that the position of the circle updates with every draw call.

var x = 0
var y = 0

function draw() {
    x = x + 10
    y = y + 10
    context.beginPath()
    context.arc(x, y, 10, 0, 2*Math.PI)
    context.closePath()
    context.fill()
    requestAnimationFrame(draw)
}

draw()

Now if you run this code, you should see a bunch of overlapping circles quickly going diagonally across your beautiful canvas. :) We are almost there! Just need to clear the canvas before each draw to make it seem like a video. Luckily for us, there is a handy function called clearRect() that we can use. It draws a white rectangle from a start point with a width and a height given to it.

var x = 0
var y = 0

function draw() {
    context.clearRect(0, 0, myCanvas.width, myCanvas.height)
    x = x + 10
    y = y + 10
    context.beginPath()
    context.arc(x, y, 10, 0, 2*Math.PI)
    context.closePath()
    context.fill()
    requestAnimationFrame(draw)
}

draw()

You should see a circle moving across your screen now. :) Not too bad right? If the canvas is too small for you, add width and height attributes (sizes in pixels) to your canvas element html like so:

<canvas id="myBeautifulCanvas" height="500" width="500"></canvas>

You can also use <canvas> to draw rectangles, images, and other neat things. With Javascript and canvas, it’s possible to make games in the web browser!

Tutorials By Nick

Raspberry Pi Code Deployment

State Machines and Movement

Adding Encoders

Buying Robot Parts

Android Studio FTC Tools: Making common tasks easier and faster

Table of Contents

Restarting ADB Tool

Connecting over Wifi Tool

Actually Connecting over Wifi

Install Driver Station Tool

Actually installing the Driver Station

The End

Using Github Pages

Canvas: Physics and Keyboard Handling

Table of Contents

“Physics”

Keyboard Handling

Advanced Keyboard Handling

Github Basics

Table of Contents

Setting up Github for Desktop

Creating your first repository

Making your first commit

Publishing your Repository

Pushing and Pulling

Your History

The End

FTC Basic Teleop

Table of Contents

Getting Set Up

Creating your first OpMode

Actually Doing Stuff with Teleop

Joysticks

Javascript Animation Basics

Table of Contents

Annoying Pop Ups

A Blank Canvas

Animating Things!