[Subject]
Pan-tilt Camera

[Required Items]
- PBH-204
- Tablet (in order to connect to the PBH-204 webpage)
- WIFI router (Wireless Connection to PBH-204)
- Pan-tilt camera (Connected to PBH-204 via RS485)
- Monitor (to display the video)

[Overall Look]
Click image for larger version Name: pantilt_overall.PNG Views: 2 Size: 126.3 KB ID: 65

[Operation]
Connect the pan-tilt camera to PBH-204 via RS485 and configure transmission speed with the DIP switch on the bottom of the camera.
The camera provides various pan-tilt protocol. However, we use only Pelcon-D protocol for this demonstration.
Using the image of pan, tilt, zoom operation buttons and the web socket, control the camera.

[Screenshot of the Webpage]
Click image for larger version Name: pantilt_joystick.PNG Views: 2 Size: 47.1 KB ID: 66

[Video clip]


[Source Codes - task0.php]
PHP Code:

<?php

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

include_once "/lib/sd_204.php";
include_once "/lib/sn_tcp_ws.php";

define("STOP", 0x0000);
define("PAN_RIGHT", 0x0002);
define("PAN_LEFT", 0x0004);
define("TILT_UP", 0x0008);
define("TILT_DOWN", 0x0010);
define("ZOOM_TELE", 0x0020);
define("ZOOM_WIDE", 0x0040);

function build_pelco_d_cmd(&$rwbuf, $addr, $cmd, $data)
{
    $rwbuf  = "\xFF";
    $rwbuf .= int2bin($addr, 1);
    $rwbuf .= int2bin($cmd, 2, TRUE);
    $rwbuf .= int2bin($data, 2, TRUE);
    $chksum = 0;
    for($i=1;$i<6;$i++)
        $chksum += bin2int($rwbuf, $i, 1);
    $rwbuf .= int2bin($chksum, 1);
}

uart_setup(0, 2400, "N81T");
ws_setup(0, "pan_tilt", "csv.phpoc");

$rwbuf = "";

while(1)
{
    if(ws_state(0) == TCP_CONNECTED)
    {
        $rlen = ws_read_line(0, $rwbuf);
        if($rlen)
        {
            $retval = (int)$rwbuf;
            switch($retval)
            {
                case 0: // Stop
                    //$rwbuf = "\xff\x01\x00\x00\x00\x00\x01";
                    build_pelco_d_cmd($rwbuf, 0x01, STOP, 0x0000);
                    //hexdump($rwbuf);
                    echo "stop\r\n";
                    uart_write(0, $rwbuf, 7);
                    uart_write(0, $rwbuf, 7);
                    break;                
                case 1: // Tilt Up
                    //$rwbuf = "\xff\x01\x00\x08\x00\x3f\x48";
                    build_pelco_d_cmd($rwbuf, 0x01, TILT_UP, 0x003f);
                    hexdump($rwbuf);
                    uart_write(0, $rwbuf, 7);
                    break;
                case 2: // Pan Right
                    //$rwbuf = "\xff\x01\x00\x02\x3f\x00\x42";
                    build_pelco_d_cmd($rwbuf, 0x01, PAN_RIGHT, 0x3f00);
                    hexdump($rwbuf);
                    uart_write(0, $rwbuf, 7);
                    break;
                case 3: // Pan Left
                    //$rwbuf = "\xff\x01\x00\x04\x3f\x00\x44";
                    build_pelco_d_cmd($rwbuf, 0x01, PAN_LEFT, 0x3f00);
                    hexdump($rwbuf);
                    uart_write(0, $rwbuf, 7);
                    break;
                case 4: // Tilt Down
                    //$rwbuf = "\xff\x01\x00\x10\x00\x3f\x50";
                    build_pelco_d_cmd($rwbuf, 0x01, TILT_DOWN, 0x003f);
                    hexdump($rwbuf);
                    uart_write(0, $rwbuf, 7);
                    break;
                case 5: // Zoom Tele
                    //$rwbuf = "\xff\x01\x00\x20\x00\x00\x21";
                    build_pelco_d_cmd($rwbuf, 0x01, ZOOM_TELE, 0x0000);
                    hexdump($rwbuf);
                    uart_write(0, $rwbuf, 7);
                    break;
                case 6: // Zoom Wide
                    //$rwbuf = "\xff\x01\x00\x40\x00\x00\x41";
                    build_pelco_d_cmd($rwbuf, 0x01, ZOOM_WIDE, 0x0000);
                    hexdump($rwbuf);
                    uart_write(0, $rwbuf, 7);
                    break;
                default:
                    echo "Unknown retval[$retval]\r\n";
                    break;
            }
        }
    }
}

?>


[Source Code - index.php]
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>PHPoC / <?echo system("uname -i")?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style> body { text-align: center; } </style>
<style type="text/css">
#area {
    margin-right: auto;
    margin-left: auto;
    height: 687px; 
    width: 501px; 
    background: url(joystick.png) no-repeat #fff; 
    position: relative;
    margin-bottom: 10px;
    border: 0px solid #000;
}

#arrow_top {
    position: absolute;
    background: url(arrow_top.png) no-repeat; 
    width:70px;
    height:63px;
    left: 215px;
    top: 85px;
}

#arrow_bottom {
    position: absolute;
    background: url(arrow_bottom.png) no-repeat; 
    width:70px;
    height:63px;
    left:215px;
    top:325px;
}

#arrow_right {
    position: absolute;
    background: url(arrow_right.png) no-repeat; 
    width:63px;
    height:70px;
    left:339px;
    top:202px;
}

#arrow_left {
    position: absolute;
    background: url(arrow_left.png) no-repeat; 
    width:63px;
    height:70px;
    left:100px;
    top:202px;
}

#zoom_tele {
    position: absolute;
    background: url(zoom_tele.png) no-repeat; 
    width:70px;
    height:63px;
    left:283px;
    top:439px;
}

#zoom_wide {
    position: absolute;
    background: url(zoom_wide.png) no-repeat; 
    width:70px;
    height:63px;
    left:148px;
    top:439px;
}
</style>
<script type="text/javascript">
var ws;
function init()
{
    var arrow_top = document.getElementById("arrow_top");
    var arrow_right = document.getElementById("arrow_right");
    var arrow_bottom = document.getElementById("arrow_bottom");
    var arrow_left = document.getElementById("arrow_left");
    var zoom_tele = document.getElementById("zoom_tele");
    var zoom_wide = document.getElementById("zoom_wide");

    arrow_top.width = 70;
    arrow_top.height = 63;

    arrow_right.width = 63;
    arrow_right.height = 70;

    arrow_bottom.width = 70;
    arrow_bottom.height = 63;

    arrow_left.width = 63;
    arrow_left.height = 70;    

    zoom_tele.width = 70;
    zoom_tele.height = 63;    

    zoom_wide.width = 70;
    zoom_wide.height = 63;    

    arrow_top.addEventListener("touchstart", mouse_down);
    arrow_top.addEventListener("touchend", mouse_up);
    arrow_top.addEventListener("touchcancel", mouse_up);
    arrow_top.addEventListener("mousedown", mouse_down);
    arrow_top.addEventListener("mouseup", mouse_up);
    arrow_top.addEventListener("mouseout", mouse_up);    

    arrow_bottom.addEventListener("touchstart", mouse_down);
    arrow_bottom.addEventListener("touchend", mouse_up);
    arrow_bottom.addEventListener("touchcancel", mouse_up);
    arrow_bottom.addEventListener("mousedown", mouse_down);
    arrow_bottom.addEventListener("mouseup", mouse_up);
    arrow_bottom.addEventListener("mouseout", mouse_up);    

    arrow_right.addEventListener("touchstart", mouse_down);
    arrow_right.addEventListener("touchend", mouse_up);
    arrow_right.addEventListener("touchcancel", mouse_up);
    arrow_right.addEventListener("mousedown", mouse_down);
    arrow_right.addEventListener("mouseup", mouse_up);
    arrow_right.addEventListener("mouseout", mouse_up);        

    arrow_left.addEventListener("touchstart", mouse_down);
    arrow_left.addEventListener("touchend", mouse_up);
    arrow_left.addEventListener("touchcancel", mouse_up);
    arrow_left.addEventListener("mousedown", mouse_down);
    arrow_left.addEventListener("mouseup", mouse_up);
    arrow_left.addEventListener("mouseout", mouse_up);            

    zoom_tele.addEventListener("touchstart", mouse_down);
    zoom_tele.addEventListener("touchend", mouse_up);
    zoom_tele.addEventListener("touchcancel", mouse_up);
    zoom_tele.addEventListener("mousedown", mouse_down);
    zoom_tele.addEventListener("mouseup", mouse_up);
    zoom_tele.addEventListener("mouseout", mouse_up);    

    zoom_wide.addEventListener("touchstart", mouse_down);
    zoom_wide.addEventListener("touchend", mouse_up);
    zoom_wide.addEventListener("touchcancel", mouse_up);
    zoom_wide.addEventListener("mousedown", mouse_down);
    zoom_wide.addEventListener("mouseup", mouse_up);
    zoom_wide.addEventListener("mouseout", mouse_up);    

    ws = new WebSocket("ws://<?echo _SERVER("HTTP_HOST"); ?>/pan_tilt", "csv.phpoc");
    document.getElementById("ws_state").innerHTML = "CONNECTING";

    ws.onopen  = function(){ document.getElementById("ws_state").innerHTML = "OPEN" };
    ws.onclose = function(){ document.getElementById("ws_state").innerHTML = "CLOSED" };
    ws.onerror = function(){ alert("websocket error " + this.url) };

    ws.onmessage = ws_onmessage;    
}

function ws_onmessage(e_msg)
{
    e_msg = e_msg || window.event; // MessageEvent

    alert("msg : " + e_msg.data);
}

function mouse_down()
{
    check_position(event.target.id);
    event.preventDefault();    
}

function mouse_up()
{
    check_position("stop");
    event.preventDefault();    
}

function check_position(position)
{
    var event_position = 0;

    switch(position)
    {
        case "arrow_top":
            event_position = 1;
            break;
        case "arrow_right":
            event_position = 2;
            break;
        case "arrow_left":
            event_position = 3;
            break;
        case "arrow_bottom":
            event_position = 4;
            break;
        case "zoom_tele":
            event_position = 5;
            break;
        case "zoom_wide":
            event_position = 6;
            break;
        case "stop":
            event_position = 0;
            break;

    }
    if(ws.readyState == 1)
        ws.send(event_position + "\r\n");    
}
window.onload = init;
</script>
</head>
<body>

<div id="area">
    <div id="arrow_top"></div>
    <div id="arrow_bottom"></div>
    <div id="arrow_right"></div>
    <div id="arrow_left"></div>
    <div id="zoom_tele"></div>
    <div id="zoom_wide"></div>
</div>

<p>
<center>
WebSocket : <span id="ws_state">CLOSED</span><br>
</center>
</p>

</body>
</html>