Control Interface

Finally, you're at the GUI portion!

Introduction

There's no HTML or CSS in this web app, except for a skeleton page. That's because I'm using a bootstrapped React.js framework. React was originally developed by Facebook then released to the public. React as a standalone library is used as single page or mobile applications, as it's optimal only for its intended use of being the quickest method to fetch rapidly changing data that needs to be recorded, which is clearly our main need (two way parsing of control and encoder data at hight speed). However, fetching data is only the beginning of what happens on a web page, which is why complex React applications usually allow for the use of additional libraries, like Bootstrap, which is a quick way to style a page effectively. The best part of React is that I give you all the libraries you need, so you don't need any drivers or whatever. It just works!

Getting the App Running

1. To run this code, you only need Node.js and npm. To install these dependencies, please refer to https://docs.npmjs.com/downloading-and-installing-node-js-and-npm.

2. Download the client and middleman folders. The entire "client" folder needs to be copied into this "middleman" folder in this repo.

3. Now you want to change the proxy setting for the web app. Basically you want to point it to the correct server address. Open up the package.json file in the client folder, NOT the middleman one. Find the line

   "proxy": "http://localhost:5000",

   Now change gears, and go to the Pi. Open up the terminal and type in

   sudo ifconfig

   Next to the wlan0 entry you will see inet addr like : 192.168.1.10 (or something). That's the IP address of the Pi. Go back to that line of code in the package.json and change the "localhost" word to that string of numbers.

4. Now open up the terminal. Navigate into the client directory and type in npm start. Your browser should open up with the app! You don't need anything else.

Congratulations, you're ready to start using your robot!