Introduction

Web-based Switch
  • Advantage: controlling machines and monitoring state of machines over unlimited distance via the internet.
  • Disadvantage: When operators are close to machines, using internet on/off may not be convenient because operators need to access internet meanwhile they can quickly turn on/off by pressing on/off switches.
Real Switch
  • Advantage: controlling machines quickly when operators are close to the machines.
  • Disadvantage: cannot control or monitor machines if they are far from machines.

To take the advantages and overcome the disadvantages of each method, I combined two methods into one


Application Description
  • Output ports are controlled by both input ports via real switch and command via Webpage.
  • When the state of an input port is changed, an output port is toggled.
  • When receiving a command from Web page via internet, an output port is toggled.
Things Used In This Project
  • PBH-204
  • Real Switch


User Interface

Click image for larger version  Name:	internet_real_switch_User Interface.png Views:	1 Size:	29.7 KB ID:	558



Source Codes

Web UI <Index.php>

PHP Code:
<?php
    $ws_host 
_SERVER("HTTP_HOST");
?>
<!DOCTYPE html>
<html>
<head>
<title>PHPoC PBH-204 Examples</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: 290px;
    height: 100px;
    position: relative;
    margin-bottom: 10px;
    border: 1px solid #000;
}
.button
{
    position: absolute;
    width:60px;
    height:60px;
    background: url(inactive.png) no-repeat;
}
#btn_0{left: 10px; top: 20px;}
#btn_1{left: 80px; top: 20px;}
#btn_2{left: 150px; top: 20px;}
#btn_3{left: 220px; top: 20px;}

</style>
<script type="text/javascript">
var ws = null;
var container = null;
var states = [0, 0, 0, 0];

function init()
{    

    container = document.getElementById("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)
{
    states = JSON.parse(e_msg.data);    

    update_view();
    //console.log(e_msg.data);
}
function ws_onopen()
{
    document.getElementById("ws_state").innerHTML = "OPEN";
    document.getElementById("wc_conn").innerHTML = "Disconnect";
    ws.send(-1 + "\r\n"); // To get current state
}
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;

    update_view();
}
function wc_onclick()
{
    if(ws == null)
    {
        ws = new WebSocket("ws://<?echo $ws_host?>/pbh_204", "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_up()
{

}
function mouse_down()
{
    if (event.target !== event.currentTarget)
    {
        var str_id = event.target.id;
        id  = parseInt(str_id.slice(4));
        states[id] = (states[id]+1) % 2;
        send_command(id);
        update_view();
    }
    event.stopPropagation();  
    event.preventDefault();  
}
function update_view()
{    
    if(ws != null)
    {
        for(var i = 0; i < 4; i++)    
        {
            if(states[i] == 0)
                document.getElementById("btn_" + i).style.backgroundImage = "url('off.png')";
            else
                document.getElementById("btn_" + i).style.backgroundImage = "url('on.png')";
        }
    }
    else
    {
        for(var i = 0; i < 4; i++)    
            document.getElementById("btn_" + i).style.backgroundImage = "url('inactive.png')";
    }
}
function send_command(cmd)
{  
    if(ws != null)
        if(ws.readyState == 1)
            ws.send(cmd + "\r\n");  
}

window.onload = init;
</script>
</head>
<body>
<div id="container">
    <div id="btn_0" class="button"></div>
    <div id="btn_1" class="button"></div>
    <div id="btn_2" class="button"></div>
    <div id="btn_3" class="button"></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>



Note that you can protect webpage from unauthorized access by using Basic Access Authentication

Task0.php

PHP Code:
<?php

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

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

st_free_setup(0"sec");
ws_setup(0"pbh_204""csv.phpoc");
$rbuf "";

$input_state = array(,000);
$output_state = array(,000);

for(
$port 0$port 4$port++)
{
    
$input_state[0] = dio_in(DI_0 $port);
}

$timeout 100// 5 minutes

$time st_free_get_count(0) + $timeout;

while(
1)
{
    
$send_update false;

    
// Check input, control output
    
for($port 0$port 4$port++)
    {
        
$in_value dio_in(DI_0 $port);

        if(
$in_value != $input_state[$port])
        {
            
$input_state[$port] = $in_value;
            
dio_out(DO_0 $portTOGGLE);
            
$send_update true;
        }
    }

    if(
ws_state(0) == TCP_CONNECTED)
    {
        
//Check data from websocket
        
$rlen ws_read_line(0$rbuf);

        if(
$rlen)
        {
            
$port = (int)$rbuf;    

            if(
$port >=&& $port 4)
                
dio_out(DO_0 $portTOGGLE);

            
$send_update true;

            
$time st_free_get_count(0) + $timeout;
        }        

        
// Send update via websocket
        
if($send_update)
        {

            
$resp "[";

            
$pid pid_open_nodie("/mmap/io4""dio_get_output");

            for(
$port 0$port 4$port++)
            {
                
$pin $port DO_0;
                
$out pid_ioctl($pid"get $pin output");
                
$resp .= "$out,";
            }

            
pid_close($pid);

            
$resp rtrim($resp",");
            
$resp .= "]";

            
ws_write(0$resp);        
        }

        
// Check timeout. if timeout expires, close ws connection and listen again.
        
if(st_free_get_count(0) >= $time)        
            
ws_setup(0"pbh_204""csv.phpoc");
    }
    else
    {
        
$time st_free_get_count(0) + $timeout;
    }
}

?>



You can get full source code here: Manual_Internet Combine.zip
Attached Files