WXforum.net

Web Weather => Weather Website PHP/AJAX scripting => Topic started by: TNETWeather on August 18, 2011, 11:38:15 PM

Title: Sample Code for extended loop image slide shows
Post by: TNETWeather on August 18, 2011, 11:38:15 PM
Sample code for extended loop image slide shows

This is sample code showing a live example of how it is possible to use the fadeslideshow JavaScript with cached images to display a extended loop of just about any sortable set of images.

These just happen to be the images from SSEC for the Real-Time U.S. Composite Satellite image.

I removed my internal website settings stuff (I use a centralized settings system for colors, names etc... ) and created just a basic test script that does this.

What you need:

Sample Test Page:
http://cumulus.tnetweather.com/test/fadetest.php

Source of the Script:
http://cumulus.tnetweather.com/test/fadetest.phps

The Perl image obtainer script is not ready yet though... but, you can use this for any sequence of images so you could use this for something else you may already have cached.  You just need to adjust the size of the images...

I am testing PHP image obtainer for this.  I gave up on the Perl script due to the possibility of incompatibilities with different systems and support issues.  PHP is easier to support than PERL and is more available to most users.  The PHP script uses cURL to obtain the images.

THIS IS JUST A TEST SCRIPT.  If you use a template system of some sort, you will need to work it in.  Normally templates come with a blank page for adding new pages for this purpose.  Most with some knowledge of PHP should be able to do this without too much work.  I don't use the common templates that people are using and have my own custom template system.  So it is hard to fit this in when I don't have a test platform to work with.

This is more for educational purpose on how you could do this.  There are many variables and ways this could be used.
Title: Re: Sample Code for extended loop image slide shows
Post by: Bunty on August 19, 2011, 01:40:13 AM
Sorry, but on the test page there is too much flickering.  I would hope that is easy to resolve.
Title: Re: Sample Code for extended loop image slide shows
Post by: jay_hoehn on August 19, 2011, 10:24:10 AM
Bunty,

I don't see the flickering.  Not sure what you are referring to.

Jay
Title: Re: Sample Code for extended loop image slide shows
Post by: Strgazr27 on August 19, 2011, 11:42:15 AM
I think the image jumps/flickers until all the images fully load up. I have seen that happen directly on the NOAA pages also.

Kevin,

Thank you for all the work on this. Following along in hopes I can get this through my thick skull and get it up and running!
Title: Re: Sample Code for extended loop image slide shows
Post by: jgillett on August 19, 2011, 11:47:24 AM
Sorry, but on the test page there is too much flickering.  I would hope that is easy to resolve.

No flickering seen here. Images come up and start rolling immediately.
Title: Re: Sample Code for extended loop image slide shows
Post by: TNETWeather on August 19, 2011, 12:50:26 PM
Sorry, but on the test page there is too much flickering.  I would hope that is easy to resolve.

I can think of a number of reasons for this.

o bandwidth
o browser cache
o processing power of the computer (most likely)
o Images themselves have popping artifacts.

The display JavaScript function relies a lot on the visitors computer to display.  If the computer is loaded down or busy with lots of other stuff, it is going to perform poorly.  I did increase the loop speed a bit, and that might be putting a larger load on the visitors computer as well.  Might back that back a bit.

However, I can't do to much about an overloaded visitors workstation.  Can't do much about that for a free solution like that.
It is one of the reasons why I normally use a flash slideshow instead myself. Works better as it has less of a load on the visitors computer (normally)

But, the request was to get this to work with the free JavaScript package...
Title: Re: Sample Code for extended loop image slide shows
Post by: Bunty on August 19, 2011, 01:36:26 PM
Bunty,

I don't see the flickering.  Not sure what you are referring to.

Jay
No flickering on my laptop like there was on my desktop.
Title: Re: Sample Code for extended loop image slide shows
Post by: jgillett on August 19, 2011, 02:25:00 PM
But, the request was to get this to work with the free JavaScript package...

A misunderstanding, just in case you thought that came from me. I'd be perfectly happy with a Flash version.

Thanks for all your efforts!
Title: Re: Sample Code for extended loop image slide shows
Post by: TNETWeather on August 19, 2011, 03:13:10 PM
The flash version has some issues as well.

1) I use the non-free version so that I have control over it.  Doesn't land on the author's site if you click the image for example.
2) The flash version I use now is discontinued.  Not sure you can get it any longer.
3) The replacement which is much more sophisticated, is called Slickboard.  But it is a lot of changes on how you control it.  The original was PHP based, the new one is only XML... not a biggie but time ... time..

So that is not necessarily an option for someone who is not already using it like I am.

** edit **
Using the FlAniS flash app would change this.  Never messed with it... looking at it today when time permits.
Title: Re: Sample Code for extended loop image slide shows
Post by: TNETWeather on August 19, 2011, 03:28:20 PM
Sorry, but on the test page there is too much flickering.  I would hope that is easy to resolve.

I changed the persist value to True.

This should cause the images to fade in more... and reduce the flicker a lot.
Title: Re: Sample Code for extended loop image slide shows
Post by: jgillett on August 19, 2011, 06:22:21 PM
2) The flash version I use now is discontinued.  Not sure you can get it any longer.

Still downloadable, but with this note...

Quote
PHP/SWF Slideshow has been replaced with an improved and extended new tool. Please see SlickBoard

There is a free version of SlickBoard, but it is limited to 10 slides (in addition to other limitations). That does us no good. License for a single domain name is $49.
Title: Re: Sample Code for extended loop image slide shows
Post by: TNETWeather on August 20, 2011, 02:40:57 PM
I gave up on distributing the Perl image obtainer... It is much harder to support and fewer people would be able to use it.  Instead, I am doing final testing on a PHP script that does the same thing.  The PHP script is using cURL to obtain, test and check for newer images.
Title: Re: Sample Code for extended loop image slide shows
Post by: ed2kayak on August 20, 2011, 02:44:50 PM
Sample page look good.
Title: Re: Sample Code for extended loop image slide shows
Post by: TNETWeather on August 20, 2011, 06:35:53 PM
Ready to do some testing... I have already contacted John via email.  Looking for perhaps one more.

I will provide custom versions of the scripts for you to test.  If that works well, I might take one of your existing template pages and modify it to display the composite radar rather than the simple test page I am using.

You will need:

o Ability to create a cache directory that you can write to.  This would be off your main webtree as the scripts would be in your web tree root.  When released, the cache will be capable of being anywhere in the webtree.  Just keeping it simple now.
o Ability to upload two scripts to the root of your web tree. One displays the stuff, the other is the image grabbers script.
o Ability to schedule a cron entry that can call the image grabbers script.  Once every 15 mins is more than enough as the images only update every 1/2 hour.

If possible, having someone with google chat abilities will make testing easier.

If this works out okay, I will post the scripts on my projects page.


Contact: tnet.services@gmail.com
Title: Re: Sample Code for extended loop image slide shows
Post by: TNETWeather on August 20, 2011, 09:45:19 PM
Got one site setup.  Had to tweak things a bit, but now have a template file that will work for some of the Saratoga templates.

Below is a link to Johns site at Harpers Ferry...

http://www.harpersferry-weather.com/wxfade_test.php (http://www.harpersferry-weather.com/wxfade_test.php)

Need to clean things up a bit, add some documentation and it should be ready to go for most.
Title: Re: Sample Code for extended loop image slide shows
Post by: Strgazr27 on August 21, 2011, 02:21:02 AM
Kevin,

I know I'm a PITA but could you or someone look at this page and let me know what I am missing? I saved the fadeslideshow.js to my site in the root. At least now it looks somewhat like it's coming together but I am obviously missing something. I know your really busy so get back to me when you can.

http://www.kingsparkweather.com/wxsat.php

It looks like I am likely missing the PHP file to grab the images. Is that the one that is part of this code snip?

f='' + escape(document.referrer);
w=screen.width;
h=screen.height;
v=navigator.appName;
if (v != 'Netscape') {var c=screen.colorDepth;}
else {var c=screen.pixelDepth;}
jsinfo = "http://www.*************.com/stat/track.php?js_resolution=" + w + "x" + h + "&js_referer=" + f + "&js_color=" + c + "&js_url=" + escape(document.URL);
try {
var script = document.createElementNS('http://www.w3.org/1999/xhtml','script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', jsinfo);
document.getElementsByTagName('body')[0].appendChild(script);
}
catch(e) {
str = "<script type=\"text/javascript\" src=\""+jsinfo+"\"></script>"
document.write(str+""); }


I'm probably wrong about that but that's my thinking. If that is what I am missing can I simply save that code as "track.php" and than point the address within that code to the location of "track.php" on my server?

Thank you,

Bobby
Title: Re: Sample Code for extended loop image slide shows
Post by: TNETWeather on August 21, 2011, 01:39:16 PM
This is an incomplete project at this point...

I haven't released the image capture code yet.  Still testing.  Only 1 site has gotten it yet and we are still working things out.

When done, it will be released as a package with source, and documentation.
Title: Re: Sample Code for extended loop image slide shows
Post by: TNETWeather on August 21, 2011, 07:35:44 PM
Figured out the flanis stuff... just need to get it to auto generate the config file now...

Sample (Raw) page

http://cumulus.tnetweather.com/wiscf_include.php (http://cumulus.tnetweather.com/wiscf_include.php)
Title: Re: Sample Code for extended loop image slide shows
Post by: Silversword on August 21, 2011, 08:59:31 PM
Hi,

It is too bad that I cannot get the same thing over here in the islands.  The closes thing that I found is is http://www.prh.noaa.gov/hnl/pages/sat_flash.php?type=Oahu-Maui (http://www.prh.noaa.gov/hnl/pages/sat_flash.php?type=Oahu-Maui)

Nice job in your site Kevin.  It will provide another good link for those that live in the continental US.

--Stan Y.
   Maui, Hawaii
Title: Re: Sample Code for extended loop image slide shows
Post by: TNETWeather on August 21, 2011, 09:20:31 PM
It is too bad that I cannot get the same thing over here in the islands.

I'm sure you could find a source.... You just need to find someone that is pulling down POES images.  You could then manipulate them and make them into a loop.

Example POES collection site... Doesnt do your area though.

http://n8imo.com/APT/index.html (http://n8imo.com/APT/index.html)
Title: Re: Sample Code for extended loop image slide shows
Post by: TNETWeather on August 21, 2011, 09:46:20 PM
another John site....

http://tiggrweather.net/wxfade_sat.php (http://tiggrweather.net/wxfade_sat.php)

I just finished up the FlAniS version as well... so I will document them and package them up.

The FlAniS version is a bit easier to size and I sized it at 640px wide instead of 800px which is hard to put on a lot of websites. 

Title: Re: Sample Code for extended loop image slide shows
Post by: TNETWeather on August 22, 2011, 11:08:58 AM
Found that for mobile use, the FLAniS applet would load 40+ images, but would barf...  Modified the FLAniS script to only use the last 25 and that seems to work.  Suspect this might be device related to memory.
Title: Re: Sample Code for extended loop image slide shows
Post by: TNETWeather on August 22, 2011, 11:43:06 PM
Still playing around with my new scripts...

Seeing how flexible it is to switch up and start capturing something else.... need to make more changes to make this easier to do as there are too many places to change things now.

This time a static webcam shot.

Setup a capture of webcam...

Collection script:

o Grabs a new image every 5 minutes minute (called by cron) if called more frequently, it only keeps new images.
o Reduces the image by 50% (ImageMagik via exec)  The images are very large to start with.
o Keeps a max of 47 images

Display (include) script:

o If newest image is newer than config file, it updates it.
o Generated conf file includes lastest 25 images (from 47 in cache). About 1-1/2 hour 24 minute loop
o Sets up the display using the FLAniS applet sized for the image.

Below is just the display include script, there is no template around it.

http://cumulus.tnetweather.com/slideshow/port_include.php (http://cumulus.tnetweather.com/slideshow/port_include.php)

When I posted this it was at night, and there were only 5 or 6 images collected so far.

Will look a lot better in daylight as there will be more to see.  Now you see the boats in the foreground moving, and lights going on and off and that is about it.
Title: Re: Sample Code for extended loop image slide shows
Post by: TNETWeather on August 23, 2011, 03:47:22 PM
Trying the same with the fadeslideshow script as well..

http://cumulus.tnetweather.com/slideshow/portf_include.php

On both, the cache is now 47 with 1 min increments.   so it is aprox 47 minute loop.  Looks much better during the day than at night.
Title: Re: Sample Code for extended loop image slide shows
Post by: jay_hoehn on September 04, 2011, 12:07:27 PM
Kevin,

How is this project coming?  Looking forward to implementing on my site.

Jay
Title: Re: Sample Code for extended loop image slide shows
Post by: TNETWeather on September 04, 2011, 05:23:13 PM
The biggest hold up is a lack of schedule trigger.

With the huge variation or complete lack of cron abilities of many hosts (some only have once an hour as the minimum interval, others like E-Rice have none), I have not come up with a solid easy to support method of doing this.

Ideally, there would be a simple easy to setup, inexpensive win tool you could use that you could point to the website and a specific php script and set the timing interval to what you want and be done.

Setting up a task scheduler is difficult to support especially for people who have never done that before.

So while the scripts themselves for displaying the info are basically easy to provide, without an easy to use trigger that is easy to support it is hard to release.

I actually wrote a small Win utility to do this, but it needs a bit more work and I have no time to work on it.
Title: Re: Sample Code for extended loop image slide shows
Post by: jmcmurry on September 04, 2011, 06:14:51 PM
System Scheduler (free) http://www.splinterware.com/products/wincron.htm (http://www.splinterware.com/products/wincron.htm) is easy to use and I use it in just that way because I'm with e-rice.  I believe many others use it too.

- Jim
Title: Re: Sample Code for extended loop image slide shows
Post by: TNETWeather on September 04, 2011, 06:35:01 PM
I've looked at it.  If the user is not logged in, it doesn't work.  The Paid version supports that but is $30
Title: Re: Sample Code for extended loop image slide shows
Post by: Strgazr27 on September 09, 2011, 07:45:38 PM
Kevin,

Fully understand your crazy busy but any updates? Would LOVE to add this to my site.

Thanks!
Title: Re: Sample Code for extended loop image slide shows
Post by: weatherc on September 10, 2011, 07:35:48 PM
For things like this i use a simple SystemSheduler + VBS-script what call the file on server.
Once first is set up it is damn easy to replicate to other calls.  :grin: