Thursday Tutorial (Building a Controller).ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Thursday Workshop - Building a Controller\n",
    "\n",
    "Our goal for this portion of the workshop is to learn how to build a simple graphical user interface (GUI) for controlling the robot. This will make it much easier for us to drive the roomba. Once we build the controller we will have a roomba race to see it in action and use it. \n",
    "\n",
    "\n",
    "## Part 1 - Intro to GUIs\n",
    "\n",
    "Before we start making the controller we need to model the world the robot will interact with. In reality this is not an easy task. The world is complicated and our means of understanding it - the robot's sensors - are imperfect. To make this task easier we need to make simplifying assumptions. \n",
    "\n",
    "We can start by viewing the world as a cartesian plane with the robot as a single point. This way we can store the robot's location and trajectory using (x, y) coordinates. We will need to periodically update the robot's location when we give it instructions to move.\n",
    "\n",
    "The state of the robot is represented by 4 things:\n",
    "\n",
    "__postion__: (x, y)\n",
    "\n",
    "__angle__: 0-360 degrees \n",
    "\n",
    "__velocity__: -500 to 500 mm/s\n",
    "\n",
    "__radius__: -2000 to 2000\n",
    "\n",
    "\n",
    "The position and angle store the location of the robot and which direction it is facing in our conceptual cartesian plane of the world. \n",
    "\n",
    "The velocity and radius are the instructions we send to the robot for how fast we would like it to travel and how much we want it to turn. \n",
    "\n",
    "\n",
    "Open the file __SimpleController.py__ \n",
    "\n",
    "\n",
    "This file contains the boilerplate code for the GUI. It uses a python module for making GUIs called TKinter.\n",
    "\n",
    "The documentation for TKinter is here:\n",
    "http://effbot.org/tkinterbook/\n",
    "\n",
    "Take a look at the _init_ method. This code sets up the different buttons and labels in the GUI. It looks complicated but most of it is actually very simple. \n",
    "\n",
    "Add the following at the end of the class to create an instance of the GUI\n",
    "\n",
    "```python\n",
    "SimpleController()\n",
    "```\n",
    "and then run the file. \n",
    "\n",
    "you should see something like this\n",
    "\n",
    "![Alt text](simple_gui_screenshot.png \"Simple Robot Controller GUI\")\n",
    "\n",
    "\n",
    "The top frame is where we will keep track of the robot's position in the world. The bottom left will keep track of the numerical position (in x, y) and angle of the robot and the bottom right will let the user manually drive the robot.\n",
    "\n",
    "The user drives the robot via the four buttons: Forward, Backward, Turn Left and Turn Right.\n",
    "\n",
    "Right now none of the buttons do anything. It's our job to hook everything in the GUI up to drive the robot.\n",
    "\n",
    "\n",
    "#### Components\n",
    "\n",
    "The GUI is made up of several components:\n",
    "\n",
    "main frame \n",
    "           - > top_frame \n",
    "                    -> canvas (the robot's location)\n",
    "            \n",
    "           - > bottom_frame\n",
    "                    -> bottom_left\n",
    "                            -> position_label\n",
    "                            -> angle_label\n",
    "                    -> bottom_right\n",
    "                            -> speed_scale\n",
    "                            -> forward_button\n",
    "                            -> backward_button\n",
    "                            -> turn_left_button\n",
    "                            -> turn_right_button\n",
    "\n",
    "\n",
    "Look at the code in the _init_ method and see if you can see how this structure is being set up. Now we will go through each type of button, label and scale and learn how to use them.\n",
    "\n",
    "\n",
    "#### Buttons\n",
    "\n",
    "Buttons are used to sense input from the user. \n",
    "\n",
    "Read the documentation here:\n",
    "\n",
    "http://effbot.org/tkinterbook/button.htm\n",
    "\n",
    "\n",
    "First lets just see how the buttons work.\n",
    "\n",
    "Edit the four button functions \n",
    "```python\n",
    "def move_forward(self):\n",
    "def move_backward(self):\n",
    "def turn_left(self):\n",
    "def turn_right(self):\n",
    "```\n",
    "\n",
    "to print \"(insert button name) button pushed\"\n",
    "\n",
    "Try running the controller and clicking the buttons to see if it works\n",
    "\n",
    "\n",
    "#### Labels\n",
    "\n",
    "Labels are used for displaying text. We can change the text that they display.\n",
    "\n",
    "Read the documentation here:\n",
    "\n",
    "http://effbot.org/tkinterbook/label.htm\n",
    "\n",
    "what does the class\n",
    "\n",
    "```python\n",
    "StringVar()\n",
    "```\n",
    "do? \n",
    "\n",
    "Look at the code for the SimpleController. \n",
    "\n",
    "what happens when \n",
    "```python\n",
    "self.angle_var.set(\"Angle: 0\")\n",
    "```\n",
    "is called? What is this doing. Explain it to a member of the staff.\n",
    " \n",
    "Reconfigure the buttons so that every time you press the move forward button the x coordinate increases by 10, every time you press the backward button the x coordinate decreases by 10, turn left changes the angle by -90 degrees and turn right changes the angle by +90 degrees.\n",
    "\n",
    "Try running the controller and seeing if your changes work. \n",
    "\n",
    "#### Scale \n",
    "\n",
    "Scales let us set the value of a parameter using a slider. Read about them here:\n",
    "\n",
    "http://effbot.org/tkinterbook/scale.htm\n",
    "\n",
    "Now configure the speed controller such that whenever the value is changed the new value is printed to the console. \n",
    "\n",
    "#### Canvas\n",
    "\n",
    "The canvas is a grid in which we can place whatever \n",
    "\n",
    "http://effbot.org/tkinterbook/canvas.htm\n",
    "\n",
    "Our canvas is pretty simple. We have one object: the roomba. We want to move the roomba around the screen and keep track of where it has been using a red line. \n",
    "\n",
    "To get an idea for how this works let's just pretend that there are 4 buttons up - down - left and right (corresponding to forward - backward - turn left - turn right). \n",
    "\n",
    "Every time you press __up__ you increase the robot's y coordinate by 10 and do not change the x coordinate.\n",
    "Every time you press __down__ you decrease the robot's y coordinate by 10 and do not change the x coordinate. \n",
    "Every time you press __left__ you decrease the robot's x coordinate by 10 and do not change the y coordinate.\n",
    "Every time you press __right__ you increase the robot's x coordinate by 10 and do not chnage the y coordinate.\n",
    "\n",
    "The change in position is demonstrated on the screen by changing the _position label_ and moving the robot graphic on the canvas to the new position. In addition we want to draw a red line along the robot's path. This can be done by adding a new line element to the canvas that connects the previous and new points. You will find the following functions __move__ and __create_line__ particularly helpful. \n",
    "\n",
    "Run the GUI and press the buttons to see your code in action. \n",
    "\n",
    "\n",
    "Take a 10 minute break when you finish Part 1.\n",
    "\n",
    "\n",
    "## Part 2 - Modeling the Moving Robot\n",
    "\n",
    "Before the robot could only move in 4 directions and only by a fixed distance. We now relax that by letting the driver specify the speed. \n",
    "\n",
    "Configure the buttons, labels and canvas to fit the following functionality:\n",
    "\n",
    "\n",
    "Every time you press \n",
    "\n",
    "__Forward__ - the robot moves forward at _speed_ mm/sec at the curent _angle_ for 1 second. \n",
    "\n",
    "\n",
    "__Backward__ - the robot moves backward at _speed_ mm/sec at the current _angle_ for 1 second.\n",
    "\n",
    "\n",
    "__Turn Left__ - the robot turns counterclockwise at _speed_ mm/sec for 1 second [this changes the _angle_]\n",
    "\n",
    "\n",
    "__Turn Right__ - the robot turns clockwise at _speed_ mm/sec for 1 second [this changes the _angle_]\n",
    "\n",
    "\n",
    "You will need to keep track of the current position and angle of the robot using instance variables. \n",
    "\n",
    "As before the robot's position on the canvas should change and a red line should be drawn along the path of the robot. \n",
    "\n",
    "\n",
    "To calculate the new position and angle of the robot you will need to use some trigionmetry. To calculate the distance traveled simply use the approximation that the robot always travels distance * time. The Math.tan function will be helpful. Note that you need to convert from degrees to radians to use this.\n",
    "\n",
    "\n",
    "## Part 3 - Making the Robot Move\n",
    "\n",
    "Finally implement the buttons so that they actually send instructions to the robot. This will not model the robot's behaviour perfectly but should give us enough control to actually start driving it! \n",
    "\n",
    "To test it plug the usb cable in and start driving the robot. See what happens when you change the speed value on the GUI. \n",
    "\n",
    "Make sure to get some practice driving the robot in before the race. \n",
    "\n",
    "\n",
    "## Part 4 - The Race\n",
    "\n",
    "Once you finish let the staff know. We will wait until enough groups are finished and then have a maze race.  \n",
    "\n",
    "\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}