Constant refreshing

**johngg** · 09-05-2007, 11:39 AM

I know just enough PHP and JS to be dangerous, but evidently not enough to solve this puzzle.

The application is simple: the building has a card access system which has a record of users, cards, and usage history in the database. I want a host an internal web page for the security staff that presents the latest card read on the screen: time, location, card holder's name, access level, card #, card status, the actual ID picture, and a map of the building with a red dot on the location where the card access event happened.

All of this works already. The user's ID picture (.jpg) is located in the file system and I can easily grab it. I have an image file with the building's blueprints on it and I do a creative imagecopymerge with a 100x100px red dot. All that works.

The issue comes in at the presentation stage. It works, but with a 2 second refresh time the images flicker and it's annoying. Very annoying.

So, that said, code.

Image merge code (merge.php):

Code:

<?php

// Arguments:
//
// src = (required) The source file to add the dot to.
// x,y = (optional) X and Y coordinates to place the dot.
// w   = (optional) The modified Width of the output file.
// r   = (optional) The Radius of the dot, else use the entire 100x100 png.

// Get dot information.
$dot = imagecreatefrompng('dot.png');
$dotwidth = imagesx($dot);
$dotheight = imagesy($dot);

// Resize dot.
$radius = $_GET['r'];
if ($radius > 0) {
	imagecopyresized($dot, $dot, 0, 0, 0, 0, $radius, $radius, $dotwidth, $dotheight);
	$dotwidth = $radius;
	$dotheight = $radius;
}

// Get the image information.
$image = imagecreatetruecolor($dotwidth, $dotheight);
$image = imagecreatefromjpeg($_GET['src']);
$srcwidth = imagesx($image);
$srcheight = imagesy($image);

$width = $_GET['w'];

if ($radius > 100 || $width > $srcwidth || $_GET['src'] == null) {
	header('Content-Type: text/plain');
	echo 'Source file (src) must be specified.
Width (w) of output must be less than the width of the orginal image.
Radius (r) must be less than 100.';
	exit();
}


// Add dot if requested.
if ($_GET['x'] > 0 && $_GET['y'] > 0) {
	$dest_x = $_GET['x'] - ($dotwidth / 2);
	$dest_y = $_GET['y'] - ($dotheight / 2);
	imagecopymerge($image, $dot, $dest_x, $dest_y, 0, 0, $dotwidth, $dotheight, 50);
}

// Adjust width if necessary.
if ($width > 0) {
	$newWidth = $srcwidth;
	$newHeight = $srcheight;
	$origRatio = $srcwidth/$srcheight;

	$newWidth = $width;
	$newHeight = $width;

	// Build new height, width
	if ($newWidth/$newHeight > $origRatio) {
		$newWidth = $newHeight*$origRatio;
	} else {
		$newHeight = $newWidth/$origRatio;
	}

	$output = imagecreatetruecolor($newWidth, $newHeight);
	imagecopyresized($output, $image, 0, 0, 0, 0, $newWidth, $newHeight, $srcwidth, $srcheight);
	header('content-type: image/jpeg');
	imagejpeg($output);
	imagedestroy($output);
} else {
	header('content-type: image/jpeg');
	imagejpeg($image);
}

imagedestroy($image);
imagedestroy($watermark);

?>

index.php:

Code:

<?php

$server="="********,1433";
$username="********";
$password="="********";
$sqlconnect=mssql_connect($server, $username, $password);
$sqldb=mssql_select_db("WIN-PAK PRO",$sqlconnect);
$sqlquery="SELECT TOP (1) * FROM SecurIT ORDER BY TimeStamp DESC;";
$results=mssql_query($sqlquery);
$row=mssql_fetch_array($results);
mssql_close($sqlconnect);

header('Content-Type: text/html; charset=utf-8');

?>

<html>
	<head>
	    <title>SecurIT 2.0.0</title>
		<noscript>
			<meta http-equiv="refresh" content="2">
		</noscript>
		<script language="JavaScript">
			<!--

			var sURL = unescape(window.location.pathname);

			function doLoad()
			{
				setTimeout( "refresh()", 2*1000 );
			}

			function refresh()
			{
				window.location.href = sURL;
			}
			//-->
		</script>
		<script language="JavaScript1.1">
			<!--
			function refresh()
			{
				window.location.replace( sURL );
			}
			//-->
		</script>
		<script language="JavaScript1.2">
			<!--
			function refresh()
			{
				window.location.reload( false );
			}
			//-->
		</script>
	</head>
	<body onload="doLoad()">
		<table>
			<tr>
				<td>
					<img src="merge.php?src=all.jpg&amp;w=800&amp;x=<?php echo $row['x']; ?>&amp;y=<?php echo $row['y']; ?>&amp;r=<?php echo $row['r']; ?>" />
				</td>
				<td valign='top'>
					<table>
						<tr>
							<td width='110'>
								Timestamp
							</td>
							<td>
								<?php echo $row['TimeStamp']; ?>
							</td>
						</tr>
						<tr>
							<td>
								Location
							</td>
							<td>
								<?php echo $row['Location']; ?>
							</td>
						</tr>
						<tr>
							<td>
								<b>Card Holder</b>
							</td>
							<td>
								<b><?php echo $row['Name']; ?></b>
							</td>
						</tr>
						<tr>
							<td>
								<b>Access Level</b>
							</td>
							<td>
								<b><?php echo $row['Access Level']; ?></b>
							</td>
						</tr>
						<tr>
							<td>
								Message
							</td>
							<td>
								<?php echo $row['Message']; ?>
							</td>
						</tr>
						<tr>
							<td>
								Card #, Status
							</td>
							<td>
								<?php echo $row['CardID']; ?> <?php echo $row['Card Status']; ?>
							</td>
						</tr>
						<tr>
							<td colspan='2' align='center'>
								<img src="../winpakimages/<?php echo $row['ImageID']; ?>" />
							</td>
						</tr>
					<table>
				</td>
			</tr>
		</table>
	</body>
</html>

**johngg** · 09-05-2007, 11:40 AM

Any thoughts on a fresh method that won't make my eyes bleed?

**elwinh** · 09-05-2007, 03:01 PM

Maby some crazy idee and i don't know if this is a good solution, but here i go:

A hidden div with a iframe in it wich reloads evry 2 sec.
In that iframe a javascript that void the location of the red dot's (x,y) to the document.

becouse of the javascript, the image is cached client side. The javascript only copies or move the dot.

**boogyman** · 09-05-2007, 03:20 PM

or you could use a meta tag in the header ?

Code:

<meta type="http-equiv" content="pragma" value="no-cache">

that should rid the browser of the cached page and force it to revalidate

**johngg** · 09-05-2007, 03:43 PM

Originally Posted by elwinh

Maby some crazy idee and i don't know if this is a good solution, but here i go:

A hidden div with a iframe in it wich reloads evry 2 sec.
In that iframe a javascript that void the location of the red dot's (x,y) to the document.

becouse of the javascript, the image is cached client side. The javascript only copies or move the dot.

So don't build the map+dot image and hand that over, just change the coordinates. Hrm, let me work on that.

**johngg** · 09-05-2007, 03:51 PM

Originally Posted by boogyman

or you could use a meta tag in the header ?

Code:

<meta type="http-equiv" content="pragma" value="no-cache">

that should rid the browser of the cached page and force it to revalidate

Not having the current information/image isn't the problem. The issue is that the image is reloaded REGARDLESS if the image on the screeen is the same as the 'new' image, and as it is refreshed/replaced the image flickers and annoys the end user in the worst possible way.

Just a rambling idea, but maybe the problem is that since I build the map + dot on the fly there really isn't a good way of telling if the image has changed. What if merge.php physically built a file and then index.php pointed at the file: Can I reload/update the image on the screen but only when the file's last modified timestamp changes?

In my mind I'm looking for some sort of trigger and either a file timestamp or the 'timestamp' field provided by the database should be sufficient. How do I make use of either of those? Or can't I?

Thread: Constant refreshing

Thread Tools

Search Thread

Constant refreshing

Bookmarks

Bookmarks

Posting Permissions