Uh, oh…
I don’t quite get it where to add these lines. And why there are those button_up.gif
and button1_over.src things?
Yes i also did think that what happens if the directory has thousands or tens of thousands of files and there are few ppl executing “getfilename.php”
First thought is that it places server under heavy load?
Is the only option to have cron job to move files to other location?
I am so sorry, I sent you the unfinished code. After that I corrected the code. I had swiped it from another
sample I had saved and was writing to too many at the same time… The old sample code used buttons instead
of a picture…
But, I think the idea of just saving the picture twice would be best. In the CAMERA software it saves the pix
with the new name with lets say, cameraPicture12342.jpg or whatever your format was.
If you just save it that way and then right after that in the next line, you just save it again as camera.jpg and
this would overwrite the current camera.jpg. So, you would be saving your archive version with the numbers
in place and a new version of the current picture. Then, you would not need to search for the latest picture.
The latest picture would ALWAYS be camera.jpg. So, just display. If it has not changed because of timing,
the display would not change, no problem… If it changes, the display will be up to date… Makes sense!
So, here is that code corrected:
[php]
function freshPic()
{
// Get the source value for the picture
newImage = new Image();
newImage.src = document.getElementById(‘filenameaddress’).value;
// Load the picture into the img tag…
document[‘latestfilename’].src = newImage;
// Go back and wait again.
holdUp();
}
[/php]
The line that pulls the filename from the hidden field, loads the picture and stores it in the IMG tag area…
But, the other way I mentioned above would work better, I think… It would always load the same picture
from the drive, so no passing new filenames around and would be much simpler code… Let us know…
Yes the original Ajaxcam used IMG src and name “campic” to identify the source picture.
I don’t know how i will change this so it will load the first picture? should i also run php code at the top of my index page that finds the source picture (latestfilename) and then use something like:
[php]<img src="./pictures/<?php echo $latest_filename;?>" name=“campic” width=“640” height=“480”[/php]
surely i don’t use “campic” as name anymore as in the original Ajaxcam? should i use “latestfilename” or “filenameaddress”?
I guess im just too stupid to put this thing together unless i get complete code…
for reference
original Ajaxcam code:
[code]
Well, the largest problem with this is project is that the camera takes a huge number of pictures.
So, as time goes by, the folder of pictures will become huge. Since you never told us the actual camera
set up, I will guess the camera is used to save the pictures in an archive. If so, you could have thousands
of pictures saved. Once you get to that number of pictures, finding the last one would take more and more
time to process. Now, if you are only using it as a live video feed, you only need to save one picture.
So, if you are archiving the pictures, you must change the picture-taking code to save the last picture twice
once with the coded number and once with the single name to be used in the viewer. Did that make sense.
As far as the refreshing goes, we can sort that out after you fix or explain the picture-taking code…
Camera is supposed to survey a construction site.
Would be easy, if it could save pictures to the computer at the site and then have the computer to ftp pictures to webserver. but it is not possible to set up computer at the site.
I think it would be best to have php find newest filename, copy it to another folder (or even to same) at same name, overwriting the old one. That way there would be no need to pass a variable to that ajaxcam code. I tried that, but i have too little knowledge to get even that working, mainly because PHP is ONLY server side! 
It is not problem for me to archive or delete the files in the folder where that camera uploads pictures for example every 24h or so. That way only max 66024=8640 files would be in that folder? Is that too much?
So i would like to have some sort of archive of pictures, if there is something in the pictures that needs to be checked afterwards.
In the camera there is no possibility to choose filename.
And i think copying it once would be enough? First find latest filename and then copy (not move) it single name to be used in viewer?
But i was thinking what happens if there are two or more persons watching the feed at the same time and that php file copying files at different times?
Okay, first, 8000 pictures really is not too many. Next, it is simple to have PHP NOT duplicate it’s check and copy picture routines. Just need to pull the filename. So, many people should be able to view the output. Also, yes, I would think just copying the latest file over a default should work nicely. No need for a different folder…
After a ton of researching various ways to do this, they all drop down to using PHP or ASP on the SERVER-SIDE.
Therefore, you should keep your PHP file that finds the latest file. And, dump the renaming and copying… That
just causes more work for the server if a lot of people are viewing the picture. Just let PHP find the latest file,
send it back to the page. Make the Javascript refresh the latest page. So, that brings us back to the JS not
working for you. I created a test to make sure the Javascript part is refreshing correctly. It is. Below is a test that should show the time every 5 seconds. It takes a minute to prove this but, it does work. And, if you are retrieving the correct filename of the latest file written, it all should work. But, one issue that I found was that it sometimes does not work correctly with IMG tags. Most picture refreshes have to be placed into DIV tags.
Not sure if that is the problem with your code. I will have time later tonight (in 6 or 7 hours) to test it with a working live folder, no time right now…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Timer Testing...</title>
<script type="text/javascript">
<!--
//
//AJAXCam v0.8b (c) 2005 Douglas Turecek http://www.ajaxcam.com
//
function holdUp()
{
//
// This function is first called either by an onLoad event in the <body> tag
// or some other event, like onClick.
//
// Set the value of refreshFreq to how often (in seconds)
// you want the picture to refresh
//
refreshFreq=5;
//
//after the refresh time elapses, go and update the picture
//
setTimeout("freshPic()", refreshFreq*1000);
}
function freshPic()
{
//
// Get the source value for the picture
// e.g. http://www.mysite.com/doug.jpg and
//
var currentPath=document.campic.src;
//
// Declare a new array to put the trimmed part of the source
// value in
//
var trimmedPath=new Array();
//
// Take everything before a question mark in the source value
// and put it in the array we created e.g. doug.jpg?0.32234 becomes
// doug.jpg (with the 0.32234 going into the second array spot
//
trimmedPath=currentPath.split("?");
//
// Take the source value and tack a qustion mark followed by a random number
// This makes the browser treat it as a new image and not use the cached copy
//
document.campic.src = trimmedPath[0] + "?" + Math.random();
//
<!--
// Now display the current time...
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10){
minutes = "0" + minutes
}
document.getElementById("displaytime").innerHTML = hours + ":" + minutes + " ";
//-->
// Go back and wait again.
holdUp();
}
// -->
</script>
</head>
<body onLoad="holdUp()">
<p>
<img src="http://www.98online.com/webcam/studio1_0000000001.jpg" width="320" height="240" name="campic" />
</p>
<br /><br />
<div ID="displaytime" style="display:block;">Starting time...</div>
</body>
</html>
Yep the problem is that i don’t simply can’t put the JS part together so it works.
If you would able to test it with actual image in live folder and maybe ulploading pictures there manually i think you could put it together in a minute. :-*
Petmui,
Man, you owe me some Karma on this one! LOL… NO IT WAS NOT A COUPLE MINUTES! Took me about 5 hours of testing every single way that was in ever note I could find on the internet…!!! !!! ! ! !
Okay, now that I ranted… It seems you can not do this with ease using Javascript. The refresh by itself is flukey and does not work correctly most of the time. It seems that it has something to do with local caching and the newer browsers just doesn’t handle Javascript image refreshing… I tried it about 1000 ways. I read many many examples and ALL of these didn’t work. A couple “seemed” to work, but, would eventually not work!
But, I did find a nice workaround that should help you out nicely…
How it works is to place a set of DIV tags wherever you want the picture to be with a “block” style. Next, you can load this using the “refresh” Javascript which will load this DIV with an external PHP file. In this PHP routine, you basically just echo the picture once it is located. This does work as it should. It seems that loading the picture externally makes the browser refresh the DIV as it should. Very nice!
Here are the two routines to test it. I place two pictures on my server called pix1.jpg and pix2.jpg. Then, I set a session variable to pass onto the PHP code which was the 1 or 2 for the picture. You would not need any of this as it would just need to locate the last file and then echo it. But, I left all that in as I have had enough of it… LOL… If you can’t get it, let me know…
First, the main PHP code, simple to understand:
pixtest.php:
[PHP]
picture goes here
[/php]
Now, the PHP code that figures which pix to view and echos it…
getnewpix.php:
[php]
echo “
”;
echo date(‘Y-m-d H:i:s’);
?>
Yes i think the loop works now!!!
Camera is being built inside a housing so no change to be absolutely sure yet. I tested it by deleting the newest picture from old pictures folder and the routine updated the picture!
I will link the final javascript code and getfilename.php that i use later in case someone is interested.
For my purposes i will create different folders inside pictures folder for every date.
Then every day i change getfilename.php and camera upload folder on the fly. And then i can go archive or
delete old folder.
But for now this topic looks solved.
btw ErnieAlex. how i can boost your karma mile high?
To karma up someone, you click the small plus on their user name where it show their karma.
Mine hasn’t changed from 25 for a long time, so there might be a limit… I am glad I could help.
At least we got this solved. Seems like the other way would have been easier, but, it just doesn’t refresh!
Oh, you could use the latest-filename code and change it to find the latest-photo-folder. Then, you don’t have to change anything daily. Just have the code find the latest-photo-folder and then the latest-file in it…
LOL… Another puzzle to solve… CYA in the bitstream!
Ok.
Here are the example javascript and getimgsrc.php that i use to find latest picture and to show it
it searches latest file and displays it at 20 seconds interval
<head>
<script type="text/javascript">
function holdUp()
{
refreshFreq=17;
setTimeout("freshPic()", refreshFreq*1000);
}
function freshPic()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("picture").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getimgsrc.php",true);
xmlhttp.send();
holdUp();
}
</script>
</head>
<body onload="freshPic()">
<div id="picture" style="display: block;"></div> <!-- add this where u want to show the picture -->
</body>[php]<?php
$path = “./pictures/”;
$latest_ctime = 0;
$latest_filename = ‘’;
$d = dir($path);
while (false !== ($entry = $d->read())) {
$filepath = “{$path}/{$entry}”;
// could do also other checks than just checking whether the entry is a file
if (is_file($filepath) && filectime($filepath) > $latest_ctime) {
$latest_ctime = filectime($filepath);
$latest_filename = “$path$entry”;
}
}
// now $latest_filename contains the filename of the newest file
sleep(3); //added 3 seconds delay. This prevents showing only partially uploaded images. adjust to suit image size/upload speed.
echo “”;
?>[/php]