Published December 18, 2020

UIUC ME 461 Final Project --Ryan Fogle

As a part of my ME 461 class, I used a TI board and an Orange PI Zero to wirelessly control the bot on two wheels through a website.

AdvancedShowcase (no instructions)238

Things used in this project

Hardware components

Orange PI Zero

Texas Instruments TMS320F28379D

Story

This project was apart of kit and instructions followed by Dan Block. If you are interested in putting together the base model please contact Dan at d-block@illinois.edu. One key-note is that the board we are using is the TMS320F28379D.

During the creation of the bot, we controlled the 3-Wheeled bot through Serial A TX and RX. This was connected through a wired connection to a PC. The goal of my bot was to do something similar but to control the bot through a wireless connection.

Here is a video of the final product:

https://illinois.zoom.us/rec/play/WlkimmJV5NsCmRyBZQbtdv_XGjafZUrW311Q879k27sRvLZqrkONW_9uh9t1M8fKZQ1X5DnkUiIPxPfJ.DxmNSPKPUXrRcvVj

For the installation of the Orange PI Zero, Dan Block also had instructions from previous classes on how to install the board. I will summarize below.

The first obstacle was to use the Orange PI Zero (http://www.orangepi.org/orangepizero/) to connect to a local router through an SSH connection. To get the SSH connection configured, I had to download OS for the Orange PI Zero and flash it to a microSD card. I used a 32 gb SD card, which is the max size you can use for this board. I downloaded the Xenial image from this link (https://armbian.hosthatch.com/archive/orangepizero/archive/). To flash the image onto the SD card I used a program called balenaEtcher.

To install the Orange PI Zero onto the board, I soldered 2x20 female header to the "Orange PI Lite" section of the board and a 2x13 male header to the Orange PI facing downwards. This was for quick attachment and detachment of the board. Then taking the Orange PI board and installing it as shown in the picture below.

Another 1x20 header was attached to the right side to connect wires from the Orange PI Board to the TI Board.

After installation of the Orange Pi to the class board, I went ahead and made a wired connection to the Orange Pi Zero board. The red wires as seen in the picture above connect to the serial port "/dev/ttyS0" which provide a terminal to work through. Using a USB virtual COM port cable, I was able to connect to the terminal through my PC. I experienced an issue with the driver for the cable I was given, although I was able to install a new driver through the cable manufacturer site.

Using a software called Tera Term, I connected to the Orange PI Zero to install packages to it, (baurate was 115200).

I then connected the PI board to the internet through

sudo nmtui

Then grabbing the IPv4 address by typing in

ifconfig

Next, I SSH'ed into the machine by using the command below

ssh yourUsername@ip-address

Once I was SSH'ed into my machine, I disconnected the wired connection. (I also assigned a static IP address to it through the MAC address and router)

Next, I installed some essential packages.

sudo apt-get update
sudo apt-get upgrade

sudo apt-get install git build-essential
sudo apt-get install libopencv-dev python-opencv
sudo apt-get install redis-server
sudo apt-get install pip3

I didn't need OpenCV for this project, but I might attached a camera to the bot later. Most of the PI programming was in python for the Orange PI Zero, so pip3 is useful for installing packages for python.

I then installed the needed python packages to run the project.

python3 -m pip install redis
python3 -m pip install flask
python3 -m pip install flask-requests
python3 -m pip install pySerial

Redis is a key-value database server that is designed for quick access. We need to install the Redis server, then use the python package to talk to Redis. I used Redis to store the data I received back from the TI Board.

Flask is a more lightweight web framework, I used this to host the website on the Orange PI Zero.

Finally, pySerial is Python's way of talking through a serial port. I talked to the TI Board through the serial port on both machines.

For the serial port connections, I used the Orange PI Schematic to determine where to connect.

I connected to the UART2_TX to PIN 43 (TI Board Serial C RX) and UART2_RX to PIN 44 (TI Board Serial C TX).

After the necessary hardware and software was created, I made two scripts on the Orange PI. The first one grabbed the data from the TI board and saved it to the Redis server. The second ran the Flask web server and send the data back to the TI board.

The first script is called 'app.py' and the second is called 'gather.py'. They can be seen in this git repo (https://github-dev.cs.illinois.edu/rsfogle2/me461_project).

The HTML page I used can also be found in 'templates/bot.html'. For the creation of the page, I used a joystick from this link (https://codepen.io/jiffy/pen/zrqwON), and wrote code to make GET to get the data and a POST request to send back the control data. The web routes are specified in the 'app.py' file.

To get both scripts to run on startup I created them as services, the files can be found in 'services' folder in the git repo. I also attached all of these files in the code section.

Using 'systemctl' I was able to enable, start, and stop the services when debugging.

In python, I was able to connect to the serial port by doing the following.

import serial

ser = serial.Serial('/dev/ttyS2', 115200)
ser.read(1) # reads one byte
ser.write(b'a') # writes 'a' to the serial port. 

ser.close() # closes connection

To set and retrieve data from Redis I did the following

import redis

r = redis.StrictRedis('0.0.0.0') # if you host on your PC

r.set('data', 'hello world!') # sets the var 'data' to the string 'hello world'

r.get('data') # will return 'hello world!' string

For a simplified chart of the end-user control to motor control works is provided below.

A schematic of the PI motor control is shown below for reference.

The website built for this project includes a JoyStick and slider to control the bot, along with showing the data that is coming from the bot. It looks like the following.

The end product delivered a bot that I can steer from my PC or phone! I could even expose my port 80 and control the bot from anywhere in the world. Please watch my video to see myself controlling the bot. Thanks.

from flask import Flask
from flask import render_template
from flask import jsonify
from flask import request
from serial import Serial
import redis
import pickle

# connect to ttyS2
app = Flask(__name__)
ser = Serial('/dev/ttyS2', 115200)
r = redis.StrictRedis('0.0.0.0')


@app.route('/')
def bot():
    return render_template('bot.html')


@app.route('/data/', methods=['GET', 'POST'])
def recieve_data():
    bot_data = request.json
    p_data = pickle.dumps(bot_data)
    r.set('data', p_data)

    return jsonify({'status': 'success'})


@app.route('/get_data/')
def get_data():
    # for testing purposes

    p_data = r.get('data')
    if p_data is not None:
        bot_data = pickle.loads(p_data)
        return jsonify(bot_data)
    else:
        return jsonify({'status': 'failed'})


@app.route('/control/', methods=['GET', 'POST'])
def control():
    try:
        res = request.get_json()
        print(res)
        ser.write(res['turn'].encode())
        ser.write(res['speed'].encode())
    except Exception as e:
        print(e)
        return jsonify({'status': 'failed'})

    return jsonify({'status': 'success'})


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

import serial
import requests

# data dictionary
data = {}

# open connect to UART
with serial.Serial('/dev/ttyS2', baudrate=115200) as ser:
    print("reading first line")
    # read first msg
    msg = ser.readline().decode()
    print('Finished reading first line')

    # create a continous loop to read messages
    while msg:

        # split values based on comma
        tokens = msg.split(',')

        # loop over value strings
        for token in tokens:
            # split name and value
            if ":" in token:
                name, val = token.split(':', 1)

                # trim whitespace
                name = name.strip()
                val = val.strip()

                # add to data dictionary
                data[name] = val
            else:
                print(token)

        # send data to web server
        url = 'http://0.0.0.0:5000/data/'

        headers = {}
        try:
            x = requests.post(url, json=data)
            print(data)
        except Exception as e:
            print(e)

        msg = ser.readline().decode()

<!doctype html>
<html lang='en'>

<head>
    <meta charset="utf-8">
</head>

<body class="noselect" onload="init();">
    <div class="container space-top">
        <h1 class="center blue-text thin">Robot Joystick</h1>
        <div class="center-align">
            <canvas id="joystick" height="300" width="300"></canvas>
        </div>
        <p class="light">X: <span id="xVal" >0</span></p>
        <pclass="light">Y: <span id="yVal" >0</span></p>
    </div>
    <div class="slidecontainer">
        <p>Speed: <span id='speed'>0</span> %</p>
        <input type="range" min="0" max="100" value="0" class="slider" id="myRange">
    </div>
    <div>
        <p>Right Distance <span id='rightdist'>0</span> rads</p>
        <p>Left Distance: <span id='leftdist'>0</span> rads</p>
        <p>Right Speed: <span id='rightspeed'>0</span> ft/s</p>
        <p>Left Speed: <span id='leftspeed'>0</span> ft/s</p>
    </div>
    <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"
        integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g=="
        crossorigin="anonymous"></script>
</body>
<style>
    body {
        height: 100%;
        width: 100%;
        background-color: #dedede;
        margin-left: 200px;
    }

    .space-top {
        padding-top: 10px;
    }

    #joystick {
        height: 400px;
        width: 400px;
        border-radius: 400px;
        -moz-border-radius: 400px;
        -webkit-border-radius: 400px;
        text-align: center;
        background-color: #80d5ff;
        font: 24px/400px Helvetica, Arial, sans-serif;
        cursor: all-scroll;
        user-select: none;
        z-index: -100;
    }

    .noselect {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .slidecontainer {
        width: 100%;
    }

    .slider {
        -webkit-appearance: none;
        width: 50%;
        height: 25px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }

    .slider:hover {
        opacity: 1;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        background: #4CAF50;
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: #4CAF50;
        cursor: pointer;
    }
</style>
<script>
    function init() {
        // easal stuff goes hur
        var xCenter = 150;
        var yCenter = 150;
        var stage = new createjs.Stage('joystick');

        var psp = new createjs.Shape();
        psp.graphics.beginFill('#333333').drawCircle(xCenter, yCenter, 50);

        psp.alpha = 0.25;

        var vertical = new createjs.Shape();
        var horizontal = new createjs.Shape();
        vertical.graphics.beginFill('#ff4d4d').drawRect(150, 0, 2, 300);
        horizontal.graphics.beginFill('#ff4d4d').drawRect(0, 150, 300, 2);

        stage.addChild(psp);
        stage.addChild(vertical);
        stage.addChild(horizontal);
        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener('tick', stage);
        stage.update();

        var myElement = $('#joystick')[0];

        // create a simple instance
        // by default, it only adds horizontal recognizers
        var mc = new Hammer(myElement);

        mc.on("panstart", function (ev) {
            var pos = $('#joystick').position();
            xCenter = psp.x;
            yCenter = psp.y;
            psp.alpha = 0.5;

            stage.update();
        });

        // listen to events...
        mc.on("panmove", function (ev) {
            var pos = $('#joystick').position();

            x = (ev.center.x - pos.left - 250);
            var y = (ev.center.y - pos.top - 170);
            $('#xVal').text(x);
            $('#yVal').text(-1 * y);

            var coords = calculateCoords(ev.angle, ev.distance);

            psp.x = coords.x;
            psp.y = coords.y;

            psp.alpha = 0.5;

            stage.update();
        });

        mc.on("panend", function (ev) {
            psp.alpha = 0.25;
            createjs.Tween.get(psp).to({
                x: xCenter,
                y: yCenter
            }, 750, createjs.Ease.elasticOut);
            $('#xVal').text(0);
            $('#yVal').text(0);
        });

        $('#myRange').change(function () {
            $('#speed').text($('#myRange').val());
        });

        setInterval(sendData, 250);
        setInterval(getData, 250);
    }

    function calculateCoords(angle, distance) {
        var coords = {};
        distance = Math.min(distance, 100);
        var rads = (angle * Math.PI) / 180.0;

        coords.x = distance * Math.cos(rads);
        coords.y = distance * Math.sin(rads);

        return coords;
    }

    function getTurn(x) {
        if (x > 0) {
            return 'R';
        }
        else if (x < 0) {
            return 'L';
        }
        else if (x == 0) {
            return 'C';
        }
    }

    function getSpeed(speed) {
        if (speed == 0) {
            return '0'
        }
        else if (speed == 100) {
            return '6';
        } else if (speed > 80) {
            return '5';
        } else if (speed > 60) {
            return '4';
        } else if (speed > 40) {
            return '3';
        } else if (speed > 20) {
            return '2';
        } else if (speed > 0) {
            return '1';
        }
    }

    function sendData() {
        let percent = parseInt($('#speed').text());
        let spd = getSpeed(percent);
        var x = parseInt($('#xVal').text());
        let turn = getTurn(x);

        let data_obj = {turn: turn, speed: spd};
        // console.log(JSON.stringify(data_obj));

        $.ajax({
            url: '/control/',
            type: 'POST',
            dataType: 'json',
            data: JSON.stringify(data_obj),
            contentType: "application/json",
            success: function (data) {
                // console.log(data);
            }
        });
    }

    function getData() {
        $.ajax({
            url: '/get_data/',
            type: 'GET',
            dataType: 'json',
            contentType: "application/json",
            success: function (data) {
                $('#rightdist').text(data['RightDistance']);
                $('#leftdist').text(data['LeftDistance']);
                $('#rightspeed').text(data['rawRightVel']);
                $('#leftspeed').text(data['rawLeftVel']);
            }
        });
    }
</script>

</html>

UIUC ME 461 Final Project --Ryan Fogle

Things used in this project

Hardware components

Story

Code

Final Project Zip

Orange PI Zero Code

Flask app.py

Data Collection gather.py

HMTL JoyStick Page

Credits

Ryan Fogle

Comments

Embed the widget on your own site

UIUC ME 461 Final Project --Ryan Fogle

UIUC ME 461 Final Project --Ryan Fogle

Things used in this project

Hardware components

Story

Code

Final Project Zip

Orange PI Zero Code

Flask app.py

Data Collection gather.py

HMTL JoyStick Page

Credits

Ryan Fogle

Comments

Related channels and tags