Controlling Pan Tilt via Web

Outline

Demo
Data Flow
User Interface
Wiring Diagram
Source Code

1. Demo

Hardware

PHPoC Blue or Black
Servo motor
Jumper wires

2. Data Flow

3. User Interface

4. Wiring Diagram

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(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.zip

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

Attached Files

pan_tilt_source_code.zip (282.2 KB, 203 views)

1 - 2

2 comments

#1

kalabwa commented

10-16-2019, 07:08 PM

Editing a comment
do it have the code for arduino?
#2

Khanh commented

10-17-2019, 09:32 AM

Editing a comment
Hello,
There is one project for controlling pan-tilt using Arduino here: https://forum.phpoc.com/blogs/iot_hobbyist/1344-arduino-pan-tilt-camera-on-web .
It's not exactly the same, but similar

Announcement

Controlling Pan Tilt via Web

Controlling Pan Tilt via Web