Hackster is hosting Hackster Holidays, Ep. 6: Livestream & Giveaway Drawing. Watch previous episodes or stream live on Monday!Stream Hackster Holidays, Ep. 6 on Monday!
phpoc_man
Published © GPL3+

Real-Time Monitoring Toilet Paper via Web Interface

This project helps caretakers save time spent manually checking toilet paper, especially in a large buildings.

BeginnerProtip2 days4,185
Real-Time Monitoring Toilet Paper via Web Interface

Things used in this project

Story

Read more

Schematics

Wiring

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

phpoc_man

phpoc_man

62 projects β€’ 408 followers

Comments