Outline
  • Demo
  • Data Flow
  • User Interface
  • Wiring Diagram
  • Source Code


1. Demo




2. Data Flow

Click image for larger version  Name:	pan_tilt_dataflow.PNG Views:	1 Size:	5.8 KB ID:	456


3. User Interface

Click image for larger version  Name:	pan_tilt_ui.png Views:	1 Size:	37.9 KB ID:	457


4. Wiring Diagram
Click image for larger version  Name:	pa_tilt_wiring.PNG Views:	1 Size:	79.5 KB ID:	458



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]
PHP Code:
<?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]
PHP Code:
<?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(00); // angles of two motor (degree)
$move_states = array(00); // 1: move forward, 0: stop, -1: move backward
$angle_max =  array(180180);
$angle_min =  array( 00);
$steps = array(11); // moving steps of each motor (degree)
$pwm = array(01); // 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$widthPWM_PERIOD);
}

ht_pwm_setup($pwm[0], WIDTH_MINPWM_PERIOD"us");
ht_pwm_setup($pwm[1], WIDTH_MINPWM_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.zip

Thanks, and if you have any question, please don't hesitate to contact me or add comment!
Attached Files