Page 1 of 2

How to display latest image with changing filename

Posted: Sat 25 Mar 2017 1:22 pm
by MikeM
I'm new to CumulusMX, websites and weather stations.
Managed to get my WeatherDuino Pro2 station up and running with the CumulusMX software running on a Raspberry Pi.

I've got the website that ships with the CumulusMX software running on my web hosting.
Now I'd like to add a weather camera to the website, problem is I have no idea how websites are put together or how it works.

Managed to add a "webcam" page and display an image from copying code from here:https://cumulus.hosiene.co.uk/viewtopic.php?f=19&t=15807

All seems to work fine, but the latest image is not loaded.
I do understand why the latest image is not loaded as the filename of the image to display is hardcoded and I need some code to load the latest image the webcam ftp'd to the webserver.

The webcam upload the images via ftp to the webserver as "cam1_20170325-150650.jpg" for example, problem is the date and time stamp within the filename changes as the webcam uploads new images.
How do I load the latest image with the filename constantly changing?

My webcam page: http://mht.co.za/weather/webcams.htm

Re: How to display latest image with changing filename

Posted: Sat 25 Mar 2017 7:01 pm
by sfws
You are using jQuery to update an element with id of 'cam1', but your HTML only contains an element with id of 'webcam1'.

Code: Select all

<img src="........jpg" id="webcam1"

Code: Select all

$("#cam1").attr("src",

Re: How to display latest image with changing filename

Posted: Sat 25 Mar 2017 7:44 pm
by MikeM
sfws wrote:You are using jQuery to update an element with id of 'cam1', but your HTML only contains an element with id of 'webcam1'.
Thank you, I corrected the error.

But the latest image is still not loaded.

Re: How to display latest image with changing filename

Posted: Sat 25 Mar 2017 10:14 pm
by sfws
MikeM wrote:Thank you, I corrected the error.

But the latest image is still not loaded.

Code: Select all

$("#cam1").attr("src","http://mht.co.za/weather/webcam/image.jpg" + timestamp)
"cam1_20170325-150650.jpg" for example
More mistakes in code segment above, you are adding timestamp after .jpg instead of before and have wrong prefix (see suggestion below):

Code: Select all

$("#cam1").attr("src","http://mht.co.za/weather/webcam/cam1_" + timestamp + ".jpg")
If still not working, then perhaps timestamp does not match up, or perhaps function is not actually running, anyway someone whose javaScript knowledge is less rusty than mine may spot more mistakes and tell you.

Re: How to display latest image with changing filename

Posted: Sun 26 Mar 2017 2:19 pm
by MikeM
sfws wrote:If still not working, then perhaps timestamp does not match up, or perhaps function is not actually running, anyway someone whose javaScript knowledge is less rusty than mine may spot more mistakes and tell you.
I made the corrections, but still not working.

Unfortunately I can't help myself, my knowledge of website design is none... :oops:

Re: How to display latest image with changing filename

Posted: Sun 26 Mar 2017 2:35 pm
by PaulMy
Hi Mike,
Not sure if my work-about will work for your need. Do you need to keep all the date stamped images or only need the last one?

My Hikvision has failed so haven't used this for about a year but what we had done is to use a cron job to run a php script to take the latest time stamp file and rename and save it such as /folder/fixedname.jpg It worked great.

Code: Select all

<?php
#############################################################################################################
## Script to rename Hikvision IP uploaded files containing date and time in file name to a new fixed filename
## Provided by morfeas2002  http://kalamata.meteoclub.gr/

## CAUTION this script will remove any ???.jpg uploaded files from the folder
## CAUTION
## CAUTION
## CAUTION this script will remove any ???.jpg uploaded files from the folder
#############################################################################################################

date_default_timezone_set("America/Toronto"); // 
//
//
$dir = "../hvipupload"; // change to suit your system relative to where this script is executed
//
$pattern = '\.(jpg)$';
//
$newstamp = 0;           
$newname = "";

if ($handle = opendir($dir)) {              
       while (false !== ($fname = readdir($handle)))  {           
         // Eliminate current directory, parent directory           
         if (ereg('^\.{1,2}$',$fname)) continue;           
         // Eliminate other pages not in pattern           
         if (! ereg($pattern,$fname)) continue;           
         // -------------
         //
         //
        
         //
         $pinakas[] = $fname;
       }
       //
       //
       sort($pinakas);
			 // 
       $posot = count($pinakas);
       //
       if ($posot>1) $newname = $pinakas[$posot-2];
       if ($posot==1) $newname = $pinakas[$posot-1];

}
closedir ($handle);

// $newname
//

copy("../hvipupload/$newname", "../hvipimage/hvipimage.jpg"); // change to suit your system relative to where this script is executed

//

$filesa = glob('../hvipupload/*.jpg'); // change to suit your system relative to where this script is executed

array_walk($filesa,'myunlink');

function myunlink($t)
{
	unlink($t);
}

?>
Enjoy,
Paul

Re: How to display latest image with changing filename

Posted: Sun 26 Mar 2017 8:15 pm
by MikeM
PaulMy wrote:Not sure if my work-about will work for your need. Do you need to keep all the date stamped images or only need the last one?
Thank you PaulMy,

I don't need to keep all the images at this stage.

Could you give me some more detailed pointers to implement your solution?

Re: How to display latest image with changing filename

Posted: Sun 26 Mar 2017 9:31 pm
by PaulMy
Hi Mike, I've sent a PM with some information of how I had been using it.

Enjoy,
Paul

Re: How to display latest image with changing filename

Posted: Tue 28 Mar 2017 11:58 am
by MikeM
PaulMy wrote:I've sent a PM with some information of how I had been using it.
Hi Paul, thank you for the assistance.
I have not received the PM with instructions.

Re: How to display latest image with changing filename

Posted: Tue 28 Mar 2017 12:35 pm
by ConligWX
I had a similar issue with my Webcam - that the image when ftp'd was going to be a random filename (well with a date in the filename) so I ended up using wget to grab the image from the webcam (most webcams will allow this)

Then I could name it what I liked, apply the weather data to it, and then save as a different filename, which is always the same for the webserver to display.

Code: Select all

#!/bin/sh
#
tday=$(date +%Y%m%d%H%M%S);
#
# get weather image
wget --http-user=xxxxx --http-password=xxxxx "http://x.x.x.x/cgi/jpg/image.cgi" -O "/share/htdocs/weather/sky1.jpg";
# next 2 lines add weather info
#
#set variables
testdata="$(/bin/cat /share/htdocs/weather/camdata.txt)";
testdata1=`date +"%A %d-%b-%Y %R %Z"`;
#
# add top and bottom banners + weather data
/share/.qpkg/Qapache/bin/convert -fill RoyalBlue4 -draw "fill-opacity 0.4 rectangle 0 0 1280 25" \
-fill red -draw "fill-opacity 0.6 rectangle 0 26 1280 27" \
-fill RoyalBlue4 -draw "fill-opacity 0.7 rectangle 0 695 1280 720" \
-fill red -draw "fill-opacity 0.6 rectangle 0 693 1280 694" \
-fill white -pointsize 18 -font /share/db_backup/script/arialbold.ttf -draw "text 10,20 'Conlig Weather Station:  $testdata1 - ICODOWNN2 - www.conligwx.org'" \
-fill yellow -pointsize 18 -draw "text 10,715 '$testdata'" /share/htdocs/weather/sky1.jpg  /share/htdocs/weather/sky.jpg
this is obviously in Linux using a cron job, and runs every minute. I then also run another cronjob then next day to grab all of yesterdays images and create a timelapsed video.

works pretty well.

Image

Re: How to display latest image with changing filename

Posted: Tue 28 Mar 2017 1:41 pm
by PaulMy
Hi Mike,
I remember typing it, reading it several times to make sure if I could understand it myself, and thought I had clicked Send button but can't find it in my Sent folder. I will give it another try, sorry.

Paul

Re: How to display latest image with changing filename

Posted: Tue 28 Mar 2017 2:00 pm
by MikeM
PaulMy wrote: I will give it another try, sorry.
Thank you!

Re: How to display latest image with changing filename

Posted: Tue 28 Mar 2017 2:12 pm
by MikeM
Toxic17 wrote:I had a similar issue with my Webcam - that the image when ftp'd was going to be a random filename (well with a date in the filename) so I ended up using wget to grab the image from the webcam (most webcams will allow this)

Then I could name it what I liked, apply the weather data to it, and then save as a different filename, which is always the same for the webserver to display.

This is obviously in Linux using a cron job, and runs every minute. I then also run another cronjob then next day to grab all of yesterdays images and create a timelapsed video.

Works pretty well.
Hi Toxic17,
I like your solution as well, especially with the weather data on the image.
What do I need to do to get your script running on my Raspberry Pi?

Would like to get a timelapse video script running at a later stage.

Re: How to display latest image with changing filename

Posted: Tue 28 Mar 2017 2:16 pm
by PaulMy
Hi Mike,
I think PM sent this time.

Enjoy,
Paul

Re: How to display latest image with changing filename

Posted: Tue 28 Mar 2017 2:19 pm
by MikeM
PaulMy wrote:Hi Mike,
I think PM sent this time.

Enjoy,
Paul
Thank you Paul, received it.
Will go through the instructions this evening and try getting it up and running.