Controlling Pan Tilt by a Smart Phone

[Subject]
Controlling Pan Tilt by a Smart Phone

[Description]
This project is an application of Controlling Pan Tilt by 3-Axis Accelerometer.
Gyro sensor in a smart phone is used instead of 3-Axis Accelerometer.
I got the values of gyro sensor using Java Script and sent them P4S-342 via web socket.

※ Caution: This example is just a sample to help you understand PHPoC.
Note that you should use an additional power source instead of PHPoC board for the servo motors.

[Board]
a. PHPoC Blue (P4S-342)
(You can also use PHPoC Black (P4S-341) instead of the PHPoC Blue)

[Sensor/Module]
a. Servo Motors * 2: RB-65PG Pan Tilt Type (Up-Down, Left-Right)

(There are two sets of pan tilt in the picture but I used one of them.)

b. Smart Phone

[Connection]
a. Servo #1 <---> P4S-342
Black <---> GND
Red <---> PWR5
Orange <---> HT0

b. Servo #2 <---> P$S-342
Black <---> GND
Red <---> PWR5
Orange <---> HT1

[Description]
1. Both servos are initialized to the center when the srcipt starts.
2. A smart phone can be connected to P4S-342 with the IP address using a web broswer after connected to the same network.
3. The [Connect] button on the web page lets you connect to P4S-342 via web socket.
4. After web socket is connected, P4S-342 can be received the values of gyro sensor while you moving the smart phone.
5. P4S-342 contorl both servos according to the recieved values.

[video]

[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_MID", 1550);

ht_pwm_setup(0, WIDTH_MID, PWM_PERIOD, "us");
ht_pwm_setup(1, WIDTH_MID, PWM_PERIOD, "us");
ws_setup(0, "pantilt", "text.phpoc");

$rwbuf = "";
$angle = 0;
$a_ref_flag = 0;
$ht_id = 0;
$offset = 0;

while(1)
{
    if(ws_state(0) == TCP_CONNECTED)
    {
        $rlen = ws_read_line(0, $rwbuf);

        if($rlen)
        {
            $str_len = strlen($rwbuf);
            $axis = substr($rwbuf, 0, 1);

            if($axis == "B")
            {
                $ht_id = 1;
                $angle = (int)substr($rwbuf, 1, ($str_len - 3));
                if($angle > 37)
                    $angle = 37;
                if($angle < -37)
                    $angle = -37;
            }

            elseif($axis == "A")
            {
                $ht_id = 0;
                $angle = (int)substr($rwbuf, 1, ($str_len - 3));
                if($a_ref_flag == 0)
                {
                    if($angle > 180)
                        $angle = $angle - 360;
                    $offset = $angle;
                    $a_ref_flag = 1;
                }
                $angle -= $offset;
                if($angle > 180)
                    $angle = $angle - 360;
                if($angle > 75)
                    $angle = 75;
                if($angle < -75)
                    $angle = -75;
            }
            else
                ;

            $width = WIDTH_MID + ($angle * 10);
            ht_pwm_width($ht_id, $width, PWM_PERIOD);
        }
    }
    else
        $a_ref_flag = 0;
    usleep(10000);
}

?>

[Source Code - index.php]

PHP Code:


<html>
<head>
<title>PHPoC / <?echo system("uname -i")?></title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style>
body { text-align:center; }
textarea { width:400px; height:400px; padding:10px; font-family:courier; font-size:14px; }
</style>
<script>
var ws;
var wc_max_len = 32768;
function ws_onopen()
{
    document.getElementById("ws_state").innerHTML = "Move your Smart Phone!";
    document.getElementById("wc_conn").innerHTML = "Disconnect";

}
function ws_onclose()
{
    document.getElementById("ws_state").innerHTML = "Click the Connect Button!";
    document.getElementById("wc_conn").innerHTML = "Connect";

    ws.onopen = null;
    ws.onclose = null;
    ws.onmessage = null;
    ws = null;
}
function wc_onclick()
{
    if(ws == null)
    {
        ws = new WebSocket("ws://<?echo _SERVER("HTTP_HOST")?>/pantilt", "text.phpoc");
        document.getElementById("ws_state").innerHTML = "CONNECTING";

        ws.onopen = ws_onopen;
        ws.onclose = ws_onclose;
        ws.onmessage = ws_onmessage;
    }
    else
        ws.close();
}
function ws_onmessage(e_msg)
{
    e_msg = e_msg || window.event; // MessageEvent

    var wc_text = document.getElementById("wc_text");
    var len = wc_text.value.length;

    if(len > (wc_max_len + wc_max_len / 10))
        wc_text.innerHTML = wc_text.value.substring(wc_max_len / 10);

    wc_text.scrollTop = wc_text.scrollHeight;
    wc_text.innerHTML += e_msg.data;
}
function wc_clear()
{
    document.getElementById("wc_text").innerHTML = "";
}
var alpha = 0;
var beta = 0;
var gamma = 0;
var resolution = 2;

if (window.DeviceOrientationEvent)
{
    window.addEventListener('deviceorientation', orientationUpdate, true);
}

function orientationUpdate(event)
{    
    if(Math.abs((event.alpha - alpha)) > resolution)
    {
        alpha = event.alpha;

        ws.send("A"+alpha+"\r\n");
    }

    if(Math.abs((event.beta - beta)) > resolution)
    {
        beta = event.beta;

        ws.send("B"+beta+"\r\n");
    }

    if(Math.abs((event.gamma - gamma)) > resolution)
    {
        gamma = event.gamma;

        ws.send("G"+gamma+"\r\n");
    }
    document.getElementById("wc_text").innerHTML = beta+" / "+alpha+"\r\n";
}

</script>
</head>
<body>

<h2>
<p><span id="ws_state">Click the Connect Button!</span><br>
</p>
<img src="pantilt.jpg" /><br>

<button id="wc_conn" type="button" onclick="wc_onclick();">Connect</button>
</h2>

</body>
</html>

Announcement

Controlling Pan Tilt by a Smart Phone

Controlling Pan Tilt by a Smart Phone