Things used in this project

Hardware components:
Phpoc blue per 100x1000 euk22wtv9i
PHPoC Blue
×1
51gzz5eu9pl. sx425
HC-SR04
×1

Schematics

Wiring
Wiring uywba929kr

Code

Main task (task0.php)PHP
This code is run in infinite loop to read distance from sensor and send it to web procgam on web browser via websocket
<?php

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

include "/lib/sd_340.php";
include "/lib/sn_tcp_ws.php";

// setup trigger pulse timer
ht_ioctl(1, "set mode output pulse");
ht_ioctl(1, "set div us");
ht_ioctl(1, "set repc 1");
ht_ioctl(1, "set count 5 10"); // 10us pulse width
 
// setup echo capture timer
ht_ioctl(0, "reset");
ht_ioctl(0, "set div us");
ht_ioctl(0, "set mode capture toggle");
ht_ioctl(0, "set trigger from pin rise");
ht_ioctl(0, "set repc 4");

ws_setup(0, "ToiletPaperMonitoring", "text.phpoc");

$pre_dist = 0;
$count = 0;

while(1)
{
	if(ws_state(0) == TCP_CONNECTED)
	{
		ht_ioctl(0, "start"); // we should start capture timer first
		ht_ioctl(1, "start"); // start trigger pulse
		 
		usleep(10000); // sleep 10ms
		 
		// 1st capture value ("get count 0") is always zero.
		// we should get 2nd capture value;
		$us = ht_ioctl(0, "get count 1");
		
		if($us == 0)
			continue;
		
		$dist = $us * 340.0 / 2; // us to meter conversion
		$dist = $dist / 10000; // meter to centimeter conversion
		
		//filter noise
		if((int)$pre_dist !=0)
		{
			if(abs($dist - $pre_dist) <= 1)
				$count++;
			else
				$count = 0;
		}
			
		$pre_dist = $dist;
		
		if($count > 5)
		{
			ws_write(0, "$dist");
			echo "$dist\r\n";
			$count = 0;
		}
		//echo $dist, "\r\n";
		//usleep(10000);
	}
	else
	{
		$pre_dist = 0;
		$count = 0;
	}
}
?>
User Interface (index.php)PHP
This is client program to provide user interface and visualize data
<html>
<head>
<title>PHPoC / <?echo system("uname -i")?></title>
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<style>
body {text-align: center;}
canvas { 
	margin-right: auto;
	margin-left: auto;
	width: 500px; 
	height: 500px; 
	background:url(background.png) no-repeat;
	background-size: contain;
}
</style>
<script>
var REAL_DISTANCE_MAX = 11.611; // in centimeters. This parameter is got from measurement with no paper-roll
var REAL_DISTANCE_MIN = 0.5; // in centimeters. This parameter is got from measurement with a full paper-roll.

var CANVAS_RADIUS_MAX = 225; // in pixel. This parameter depends on the canvas size and background image 
var CANVAS_RADIUS_MIN = 56; // in pixel. This parameter depends on the canvas size and background image 

var canvas;
var ctx; 
var trash, bin;
var ws = null;

function init()
{
	canvas = document.getElementById("cvs");
	ctx = canvas.getContext('2d');
	ctx.strokeStyle = "LightGray";
	ctx.fillStyle = "white";
	ctx.lineWidth = 5;
	
}
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";

	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")?>/ToiletPaperMonitoring", "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 dist = e_msg.data; // in centimeters
	console.log(dist);
	
	if(dist < REAL_DISTANCE_MIN)
		dist = REAL_DISTANCE_MIN;
	
	if(dist > REAL_DISTANCE_MAX)
		dist = REAL_DISTANCE_MAX;
	
	if(dist > (REAL_DISTANCE_MAX - 0.2))
		ctx.strokeStyle = "Red"; // alert
	else
		ctx.strokeStyle = "LightGray";
	
	// Scale
	
	var real_thickness = REAL_DISTANCE_MAX - dist;
	var ratio = real_thickness / (REAL_DISTANCE_MAX - REAL_DISTANCE_MIN);
	var cvs_thickness = ratio * (CANVAS_RADIUS_MAX - CANVAS_RADIUS_MIN);
	var radius = Math.round(cvs_thickness + CANVAS_RADIUS_MIN);
	
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	
	ctx.beginPath();
	ctx.arc(canvas.width / 2, canvas.height / 2 , radius, 0, 2*Math.PI);
	ctx.stroke();
	ctx.fill();
	
	// draw axle
	ctx.save();
	ctx.fillStyle = "DimGray";
	ctx.beginPath();
	ctx.arc(canvas.width / 2, canvas.height / 2 , CANVAS_RADIUS_MIN, 2*Math.PI, 0);
	ctx.fill();
	ctx.restore();
}

window.onload = init;
</script>
</head>
<body>

<h2>
Toilet-Paper Monotoring<br><br>
</h2>
<canvas id="cvs" width="500" height="500"></canvas>
<p><span id="ws_state">CLOSED</span><br></p>
<button id="wc_conn" type="button" onclick="wc_onclick();">Connect</button>
<button id="wc_clear" type="button" onclick="wc_clear();">Clear</button>
</body>
</html>

Credits

Replications

Did you replicate this project? Share it!

I made one

Love this project? Think it could be improved? Tell us what you think!

Give feedback

Comments

Similar projects you might like

Play a Song with Stepper Motor
Easy
  • 50
  • 6

Play a harmonized song with two stepper motors connected to a PHPoC blue or black and stepper motor smart expansion boards (PES-2403).

Google Home - Control DIY Devices
Easy
  • 891
  • 10

Full instructions

This project show how to control multiple IoT devices using Google Home.

8x8 Matrix LED Snake Game (Smartphone Motion)
Easy
  • 438
  • 13

Full instructions

This is the snake game for PHPoC Arduino Shield (P4S-347/348) by a gyro sensor of smartphone.

Web Sketch (HTML5 Canvas)
Easy
  • 605
  • 12

Data from 2 rotary switches are sent to a webpage. It draws lines using HTML5 canvas with PHPoC Shield for Arduino like the Etch A Sketch.

RC Spider Robot
Easy
  • 151
  • 8

Remote spider robot controlled with PHPoC Blue.

EM506 GPS Module with PHPoC Blue
Easy
  • 172
  • 8

Full instructions

This example uses an EM-506 GPS module and google map to get and show latitudes and longitudes.

ProjectsCommunitiesTopicsContestsLiveAppsBetaFree StoreBlogAdd projectSign up / Login
Feedback