Pan Tilt KIT Control Test

Pan Tilt KIT Control Test

Postby Khanh » Fri Apr 22, 2016 3:16 pm

Outline
    - Demo
    - Data Flow
    - User Interface
    - Wiring between the gripper robot and PHPoC
    - Source Code
1. Demo
phpBB [video]


2. Data Flow

dataflow.PNG
dataflow.PNG (10.97 KiB) Viewed 2649 times


3. User Interface

ui.png
ui.png (40.56 KiB) Viewed 2649 times


4. Wiring between the gripper robot and PHPoC

wiring.PNG
wiring.PNG (94.44 KiB) Viewed 2649 times


5. Source Code
Apart from library, there are two main source files in PHPoC:
 index.php: once receiving http request from a client, PHPoC executes this file (only executing source inside <?php ?> tag) and then return a html file to client. So, client side is implemented in this file.
 task0.php: this file contains the source code of server side. So you can implement the function to receive the command and control the robot here.

By using bitwise operators in index.php and shift operators in task0.php, it's enable multiple controls at the same time.
[Source code - index.php]
Code: Select all

<?php
    $ws_host 
= _SERVER("HTTP_HOST");
    define("CMD_STOP", 0);
    define("CMD_RIGHT", 1);
    define("CMD_LEFT", 2);
    define("CMD_DOWN", 4);
    define("CMD_UP", 8);
?>
<!DOCTYPE html>
<html>
<head>
<title>PHPoC Pan Tilt Control</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style type="text/css">
body { text-align: center; }
#container {
    margin-right: auto;
    margin-left: auto;
    width: 512px; 
    height: 384px; 
    background: url(background.png) no-repeat; 
    background-size: contain;
    position: relative;
    margin-bottom: 10px;
    border: 1px solid #000;
}
div[class^='arrow'] { position: absolute; }
.arrow_up, .arrow_down { width:107px; height:52px;}
.arrow_left, .arrow_right { width:52px; height:107px;}
.arrow_up {
    background: url(up_inactive.png) no-repeat; 
    background-size: contain; 
    left: 202px;
    top: 88px;
}

.arrow_down {
    background: url(down_inactive.png) no-repeat; 
    background-size: contain; 
    left:202px;
    top:244px;
}

.arrow_right {
    background: url(right_inactive.png) no-repeat;
    background-size: contain;     
    left:307px;
    top:138px;
}

.arrow_left {
    background: url(left_inactive.png) no-repeat; 
    background-size: contain;
    left:152px;
    top:138px;
}

</style>
<script type="text/javascript">
var CMD_STOP = 0;
var img_name_lookup = {
    <?php echo CMD_LEFT?>: "left",
    <?php echo CMD_RIGHT?>: "right",
    <?php echo CMD_UP?>: "up",
    <?php echo CMD_DOWN?>: "down"
}
var cmd = 0;
var ws = null;

function init() 
{
    
    var container = document.querySelector("#container");
    container.addEventListener("touchstart", mouse_down);
    container.addEventListener("touchend", mouse_up);
    container.addEventListener("touchcancel", mouse_up);
    container.addEventListener("mousedown", mouse_down);
    container.addEventListener("mouseup", mouse_up);
    container.addEventListener("mouseout", mouse_up);    
}
function ws_onmessage(e_msg)
{
    e_msg = e_msg || window.event; // MessageEvent
 
    //alert("msg : " + e_msg.data);
}
function ws_onopen()
{
    document.getElementById("ws_state").innerHTML = "OPEN";
    document.getElementById("wc_conn").innerHTML = "Disconnect";
}
function ws_onclose()
{
    document.getElementById("ws_state").innerHTML = "CLOSED";
    document.getElementById("wc_conn").innerHTML = "Connect";
    console.log("socket was closed");
    ws.onopen = null;
    ws.onclose = null;
    ws.onmessage = null;
    ws = null;
}
function wc_onclick()
{
    if(ws == null)
    {
        ws = new WebSocket("ws://<?echo $ws_host?>/pan_tilt", "csv.phpoc");
        document.getElementById("ws_state").innerHTML = "CONNECTING";
        
        ws.onopen = ws_onopen;
        ws.onclose = ws_onclose;
        ws.onmessage = ws_onmessage; 
    }
    else
        ws.close();
}
function mouse_down(event) 
{
    if (event.target !== event.currentTarget) 
    {
        var id = event.target.id;
        set_command(id);
        event.target.style.backgroundImage = "url('" + img_name_lookup[id] + "_active.png')";
    }
    event.stopPropagation();    
    event.preventDefault();    
}

function mouse_up(event) 
{
    if (event.target !== event.currentTarget) 
    {
        var id = event.target.id;
        clear_command(id);
        event.target.style.backgroundImage = "url('" + img_name_lookup[id] + "_inactive.png')";
    }
    event.stopPropagation();   
    event.preventDefault();    
}

function set_command(id) 
{    
    cmd = cmd | id ;
    if(ws != null)
        if(ws.readyState == 1)
            ws.send(cmd + "\r\n");    
}
function clear_command(id)
{    
    cmd = cmd & (~id) ;
    if(ws != null)
        if(ws.readyState == 1)
            ws.send(cmd + "\r\n");   
}
window.onload = init;
</script>
</head>
<body>

<div id="container">
    <div id="<?echo CMD_UP?>" class="arrow_up"></div>
    <div id="<?echo CMD_DOWN?>" class="arrow_down"></div>
    <div id="<?echo CMD_RIGHT?>" class="arrow_right"></div>
    <div id="<?echo CMD_LEFT?>" class="arrow_left"></div>
</div>
<p>
WebSocket : <span id="ws_state">null</span><br>
</p>
<button id="wc_conn" type="button" onclick="wc_onclick();">Connect</button>
</body>
</html>    

[Source code - task0.php]
Code: Select all

<?php

if(_SERVER("REQUEST_METHOD"))
    exit; // avoid php execution via http request

include "/lib/sd_340.php";
include "/lib/sn_tcp_ws.php";

define("PWM_PERIOD", 20000); // 20000us (20ms)
define("WIDTH_MIN", 771);
define("WIDTH_MAX", 2193);

define("CMD_STOP", 0);
define("CMD_RIGHT", 1);
define("CMD_LEFT", 2);
define("CMD_DOWN", 4);
define("CMD_UP", 8);

define("LEFT_RIGHT_INDEX", 0);
define("UP_DOWN_INDEX", 1);

$angles = array(0, 0); // angles of two motor (degree)
$move_states = array(0, 0); // 1: move forward, 0: stop, -1: move backward
$angle_max =  array(180, 180);
$angle_min =  array( 0, 0);
$steps = array(1, 1); // moving steps of each motor (degree)
$pwm = array(0, 1); // ht0 control lef_right motor, ht1 control up_down motor

function servo_set_angle($id, $angle) 
{             
    $width 
= WIDTH_MIN + (int)round((WIDTH_MAX - WIDTH_MIN) * $angle / 180.0);
    if(($width >= WIDTH_MIN) && ($width <= WIDTH_MAX))
        ht_pwm_width($id, $width, PWM_PERIOD);
}

ht_pwm_setup($pwm[0], WIDTH_MIN, PWM_PERIOD, "us");
ht_pwm_setup($pwm[1], WIDTH_MIN, PWM_PERIOD, "us");

ws_setup(0, "pan_tilt", "csv.phpoc");

$rbuf = "";

for(
$i = 0; $i <2; $i++)
{
    servo_set_angle($pwm[$i], $angles[$i]);
}
 
while(1)
{
    
    if
(ws_state(0) == TCP_CONNECTED)
    {
        $rlen = ws_read_line(0, $rbuf);

        if($rlen)
        {
            $cmd = (int)$rbuf;
            
            $move_states
[LEFT_RIGHT_INDEX] = ($cmd&CMD_RIGHT) - (($cmd&CMD_LEFT)>>1);
            $move_states[UP_DOWN_INDEX] = (($cmd&CMD_DOWN)>>2) - (($cmd&CMD_UP)>>3);                
        
}
        
        for
($i = 0; $i <2; $i++)
        {
            $angles[$i] += $move_states[$i]*$steps[$i];
            
            if
($angles[$i] > $angle_max[$i])
                $angles[$i] = $angle_max[$i];
            else if($angles[$i] < $angle_min[$i])
                $angles[$i] = $angle_min[$i];
            
            
// set angle 
            servo_set_angle($pwm[$i], $angles[$i]);
        }
        usleep(5000);    
        echo 
"\r\n";
        echo $angles[0];
        echo ", ";
        echo $angles[1];
    }
}
 
?>
    


You can get full source code here:
pan_tilt_source_code.rar
(281.74 KiB) Downloaded 208 times

Thanks, and if you have any question, please don't hesitate to contact me or add comment!
Khanh
 
Posts: 72
Joined: Fri Mar 11, 2016 10:57 am

Return to Project

Who is online

Users browsing this forum: No registered users and 1 guest

cron