Tweet
What does the application in this example do with motion sensor?
- Checking presence of people in their desk in office via webpage.
- Sending email notification if someone comes to your desk in some specific period of time.
Things Used In This Project
- PHPoC Blue or PHPoC Black
- A motion sensor: I use PIR motion sensor with mikro bus interface
- mikroBUS™ Expansion Board for PHPoC (optional)
After assembly
User Interfaces
Home and scheduler
Presence of people
- Nobody in your desk: gray background
- Someone in your desk: blink between Coral and DarkCyan background
Source Codes
There are two parts for two functions:
Function 1: Checking presence of people in their desk in office via webpage
(presence.php)
PHP Code:
<?php
$ws_host = _SERVER("HTTP_HOST");
include_once "/lib/sd_340.php";
define("PIN_INT", 8);
uio_setup(0, PIN_INT, "in");
if(uio_in(0, PIN_INT))
$is_detected = true;
else
$is_detected = false;
?>
<!DOCTYPE html>
<html>
<head>
<title>PHPoC Motion Sensor</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style type="text/css">
body { text-align: center; }
#color {
margin-right: auto;
margin-left: auto;
width: 320px;
height: 320px;
background: url(background.png) no-repeat;
background-size: contain;
position: relative;
margin-bottom: 10px;
border: 1px solid #000;
}
p {
font-size:160%;
font-weight: bold;
font-style: italic;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
var color_1 = "DarkCyan";
var color_2 = "Coral";
var is_presence = false;
function init()
{
document.getElementById("color").style.backgroundColor = "LightGray";
<?php
if($is_detected)
echo "is_presence = true;";
?>
}
setInterval(function () {
$("#color").css("background-color", function () {
if(is_presence == true)
{
this.switch = !this.switch
return this.switch ? color_1 : color_2;
}
});
}, 500);
window.onload = init;
</script>
</head>
<p>
<?php
if($is_detected)
echo "Someone in Your Desk";
else
echo "Nobody in Your Desk";
?>
</p>
<body>
<div id="color"></div>
<p><a href="http://<?php echo $ws_host?>/presence.php">Recheck</a></p>
</body>
</html>
Function 2: Sending email notification if someone comes to your desk in some specific period of time.
We need to use scheduling function( Refer to this link for more detail https://forum.phpoc.com/blogs/khanh-...-smart-devices
(schedule.php) for schedule setting via webpage.
PHP Code:
<?php
set_time_limit(30);
include_once "/lib/sc_envu.php";
$envu = envu_read("envu");
if(_SERVER("REQUEST_METHOD") == "POST")
{
$data = _POST("data");
envu_update($envu, "schedule", $data);
envu_write("envu", $envu, strlen($envu), 0);
system("reboot sys 1000");
}
else
{
if($envu == "")
{
$envu = "schedule=\r\n";
envu_write("envu", $envu, strlen($envu), 0);
}
}
?>
<!DOCTYPE html>
<html>
<?php
$stypeno_table = array(0, 1, 2);
$stype_table = array("RS232", "RS485", "RS422");
$baud_table = array(230400, 115200, 57600, 38400, 19200, 14400, 9600, 4800, 2400, 1200);
$parityno_table = array(0, 1, 2, 3, 4, 5);
$parity_table = array("None", "Even", "Odd", "Mark", "Space");
$fctrlno_table = array(0, 1, 2);
$fctrl_table = array("None", "RTS/CTS", "Xon/Xoff");
$operationno_table = array(0, 2);
$operation_table = array("TCP Server", "TCP Client");
?>
<head>
<title><?php echo system("uname -i");?> WEB Configuration</title>
<meta content="initial-scale=0.5, maximum-scale=1.0, minimum-scale=0.5, width=device-width, user-scalable=yes" name="viewport">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<style type="text/css">
body { font-family: verdana, Helvetica, Arial, sans-serif, gulim; }
h1 { font-weight: bold; font-family : verdana, Helvetica, Arial, verdana, sans-serif, gulim; font-size:15pt; padding-bottom:5px;}
.schedule {border-collapse:collapse; width:640px; font-size:14pt; table-layout: fixed;}
.theader { font-weight: bold;}
tr {height :28px; border-bottom: 1px solid #ccc;}
td { padding-left: 10px; text-align: center;}
.delete { font-weight: bold; text-align: center !important;}
.superHeader {height: 2em; color: white; background-color: rgb(0,153,153); font-size:9pt; position:fixed; left:0; right:0; top:0; z-index:5; }
.right {
color: white;
position: absolute;
right: 3em;
bottom: 4px;
font-size:12pt;
}
.left {
color: white;
position: absolute;
left: 3em;
bottom: 4px;
font-size:12pt;
}
.right a, .left a
{
color: white;
background-color: transparent;
text-decoration: none;
margin: 0;
padding:0 2ex 0 2ex;
}
.right a:hover, .left a:hover
{
color: white;
text-decoration: underline;
}
.midHeader {color: white; background-color: rgb(6, 38, 111); position:fixed; left:0; right:0; top:1.5em; z-index:3;}
.headerTitle {
font-size: 250%;
font-weight: normal;
margin: 0 0 0 4mm;
padding: 0.25ex 0 1ex 0;
font-family: impact;
}
#footer{margin:0 auto; height:auto !important; height:100%; margin-bottom:-100px; }
.superFooter {
height: 2em; color: white; background-color: rgb(6, 38, 111); font-size:12pt; position:fixed; left:0; right:0; bottom:0; z-index:4;
}
.zebra {background-color : #ECECEC;}
.del_icon {
color: #cc0000;
font-size: 120%;
font-weight: bold;
}
.del_icon:hover {
color: red;
cursor: pointer;
}
.add_icon {
color: #009933;
font-size: 150%;
font-weight: 900;
}
.add_icon:hover {
color: #1aff66;
cursor: pointer;
}
</style>
<script type="text/javascript">
<?php
$envu = envu_read("envu");
$schedule = envu_find($envu, "schedule");
?>
var schedule_list = new Array();
function init()
{
var scheduleTable = document.getElementById("scheduleTable");
var data = "<?php echo $schedule?>";
if(data != "")
schedule_list = data.split("||");
for(var i = 0; i < schedule_list.length; i++)
{
schedule_list[i] = schedule_list[i].split("|");
// display schedule on schedule table
var row = scheduleTable.insertRow();
//row.style.color = "#1E90FF";
var rowHtml = '<td width="190px">';
rowHtml += schedule_list[i][0];
rowHtml += '</td><td>';
rowHtml += schedule_list[i][1];
rowHtml += '</td><td>';
rowHtml += schedule_list[i][2];
rowHtml += '</td><td class="delete"><span class="del_icon" onclick="del_schedule(this)">✖</span></td>';
row.innerHTML = rowHtml;
}
}
function del_schedule(e)
{
var row_index = e.parentElement.parentElement.rowIndex;
console.log(row_index);
document.getElementById("scheduleTable").deleteRow(row_index);
schedule_list.splice(row_index-1, 1);
}
function update_schedule(e)
{
var table = document.getElementById("scheduleTable");
var row = table.insertRow();
row.innerHTML = '<td width="190px">DAY</td><td>FROM</td><td>TO</td><td class="delete"><span class="del_icon" onclick="del_schedule(this)">X</span></td>';
}
function add_schedule()
{
var addTable = document.getElementById("addTable");
var scheduleTable = document.getElementById("scheduleTable");
var numRow = addTable.rows.length;
if(numRow > 0)
{
var row = addTable.rows[0];
var days = row.cells[0].childNodes[0];
var day = days.options[days.selectedIndex].value;
var startTime = row.cells[1].childNodes[0].value;
var endTime = row.cells[2].childNodes[0].value;
console.log(day + ":" + startTime + ":" + endTime);
//add new row in schedule table
row = scheduleTable.insertRow();
row.style.color = "#1E90FF";
var rowHtml = '<td width="190px">';
rowHtml += day;
rowHtml += '</td><td>';
rowHtml += startTime;
rowHtml += '</td><td>';
rowHtml += endTime;
rowHtml += '</td><td class="delete"><span class="del_icon" onclick="del_schedule(this)">✖</span></td>';
schedule_list.push([day, startTime, endTime]);
row.innerHTML = rowHtml;
//delete old row in add table
addTable.deleteRow(0);
//change confirm to add sign
document.getElementById("add_icon").innerHTML = '✚';
}
else
{
var newRow = addTable.insertRow();
var cell0 = newRow.insertCell();
var cell1 = newRow.insertCell();
var cell2 = newRow.insertCell();
var cell3 = newRow.insertCell();
var select = '<select>';
select += '<option value="Sun">Sunday</option>';
select += '<option value="Mon">Monday</option>';
select += '<option value="Tue">Tuesday</option>';
select += '<option value="Wed">Wednesday</option>';
select += '<option value="Thu">Thursday</option>';
select += '<option value="Fri">Friday</option>';
select += '<option value="Sat">Saturday</option>';
select += '</select>';
cell0.innerHTML += select;
cell1.innerHTML = '<input type="time" name="usr_time" value="09:00">';
cell2.innerHTML = '<input type="time" name="usr_time" value="18:00">';
cell3.innerHTML = "";
//change add to confirm sign
document.getElementById("add_icon").innerHTML = '✔';
}
}
function excSubmit()
{
var schedule_form = document.schedule_form;
var data = new Array();
for(var i = 0; i < schedule_list.length; i++)
{
data.push(schedule_list[i].join("|")) ;
}
schedule_form.data.value = data.join("||");
schedule_form.submit();
}
window.onload = init;
</script>
</head>
<body>
<div id="header">
<div class="superHeader">
<div class="left">
</div>
<div class="right">
<a href="http://www.phpoc.com/forum/" target="_blank">PHPoC Forum</a>
</div>
</div>
<div class="midHeader">
<h1 class="headerTitle"><center>Scheduler</center></h1>
<div class="left">
</div>
</div>
<div class="subHeader">
</div>
</div>
<br /><br /><br /><br />
<center>
<form name="schedule_form" action="schedule.php" method="post">
<hr style="margin:50px 0 -10px 0; width:640px;" size="6" noshade>
<h1></h1>
<table id="scheduleTable" class="schedule">
<tr class="zebra">
<td class="theader">DAY</td>
<td class="theader">FROM</td>
<td class="theader">TO</td>
<td class="delete"><i class="fa fa-trash"></i></td>
</tr>
</table>
<input type="hidden" name="data" value="">
</form>
<br>
<table id="addTable" class="schedule">
</table>
<table style="width:640px;">
<tr>
<td class="theader" style="text-align: right;"><span class="add_icon" id="add_icon" onclick="add_schedule(this)">✚</span></td>
</tr>
<tr>
<td class="theader" style="text-align: center;"><a href="javascript:excSubmit();">SAVE</a></td>
</tr>
</table>
</center>
<br /><br /><br /><br />
<div id="footer">
<div class="superFooter">
</div>
</div>
</body>
</html>
(task0.php) to check presence of people, check whether under the setting period or not and send email.
PHP Code:
<?php
if(_SERVER("REQUEST_METHOD"))
exit; // avoid php execution via http request
include_once "/lib/sd_340.php";
include_once "/lib/sc_envu.php";
include_once "/lib/sn_dns.php";
include_once "/lib/sn_esmtp.php";
define("PIN_INT", 8);
uio_setup(0, PIN_INT, "in");
$envu = envu_read("envu");
$schedules = envu_find($envu, "schedule");
$count = 0;
if($schedules != "")
{
$schedules = explode("||", $schedules);
$count = count($schedules);
for($i = 0; $i < $count; $i++)
{
$schedules[$i] = explode("|", $schedules[$i]);
}
}
else
$schedules = array();
$is_working_time = true;
$is_detected = false;
while(1)
{
if(uio_in(0, PIN_INT))// detect someone
{
if($is_detected)
{
usleep(500000);
continue;
}
$is_detected = true;
}
else
{
$is_detected = false;
usleep(500000);
continue;
}
$is_working_time = false;
if($count)
{
$day = date("D");
$hour = (int)date("H");
$minute = (int)date("i");
$current_time = $hour*60 + $minute;//in minute
for($i = 0; $i < $count; $i++)
{
if($day == $schedules[$i][0])
{
$temp = explode(":", $schedules[$i][1]);
$start_time = ((int)$temp[0])*60 + (int)$temp[1];//in minute
$temp = explode(":", $schedules[$i][2]);
$end_time = ((int)$temp[0])*60 + (int)$temp[1];//in minute
if($current_time >= $start_time && $current_time <= $end_time)
{
$is_working_time = true;
break;
}
}
}
}
if($is_working_time)
{
//TODO
}
else
{
//TODO
esmtp_account("[email protected]_domain.com", "from_name");
esmtp_auth("msa_id", "msa_password");
esmtp_msa("smtp.gmail.com", 465);
$subject = "Alert";
$message = "Hello sir, There is someone in the dest in out of working time\r\n";
$msg = esmtp_send("[email protected]_domain.com", "to_name", $subject, $message);
if($msg == "221")
echo "send mail successful\r\n";
else
echo "send mail failed\r\n";
}
}
?>
Home page (index.php): link to schedule setting and presence checking.
PHP Code:
<?php
$ws_host = _SERVER("HTTP_HOST");
?>
<!DOCTYPE html>
<html>
<head>
<title>PHPoC Motion Sensor</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style type="text/css">
body { text-align: center; }
p {
font-size:160%;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<p><a href="schedule.php">Schedule</a></p>
<p><a href="presence.php">Check Presence</a></p>
</body>
</html>
You can get full source code here: motion_sensor_Full Souce Code.zip