Author Topic: Sample Code for extended loop image slide shows  (Read 3598 times)

0 Members and 1 Guest are viewing this topic.

Offline TNETWeather

  • Kevin Reed (KrelvinAZ)
  • Senior Contributor
  • ****
  • Posts: 193
  • Davis Vantage Pro2+ with full FARS
    • TNET Weather - Mesa, AZ USA
Sample Code for extended loop image slide shows
« 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:
  • You will need the script source that I point at below
  • You will need the external fadeslideshow.js script which you can get from the original source of the script
  • You will need a cache directory with the files you have obtained in sortable filename format.  Note on this, I plan on posting a Perl PHP script that can be run from cron to do this... not ready yet. WILL BE ADDED TO THIS POST WHEN DONE
  • The Perl Image Retriever would require web hosting with Perl and wget access and access to some sort of scheduler.

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.
« Last Edit: August 20, 2011, 02:39:16 PM by TNETWeather »

All you need is Time, Aptitude and Desire ... and you can build just about anything...

Offline Bunty

  • Forecaster
  • *****
  • Posts: 1354
  • Home of Oklahoma State University
    • Welcome to Stillwater Weather
Re: Sample Code for extended loop image slide shows
« Reply #1 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.

Also the 2nd home page using modified AltDashboard 6.81 at http://stillwaterweather.com/wx/2ndhome.php

Offline jay_hoehn

  • WxElement panel
  • Forecaster
  • *****
  • Posts: 478
    • Jay's Woodcrafts
Re: Sample Code for extended loop image slide shows
« Reply #2 on: August 19, 2011, 10:24:10 AM »
Bunty,

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

Jay
Davis Vantage Pro2 Plus
VVP
VWS
Cumulus
WeatherFlash
Image Salsa

Offline Strgazr27

  • "The Cam Man"
  • Forecaster
  • *****
  • Posts: 590
    • Kings Park Weather
Re: Sample Code for extended loop image slide shows
« Reply #3 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!
Bobby M.
Davis VP2 6152 w Daylight FARS - Logitech C525 and C310
WD - WDLive - GRLevel3 - Image Salsa - VVP - Startwatch

"http://www.kingsparkweather.com"
KNYKINGS7 on WU



Offline jgillett

  • Forecaster
  • *****
  • Posts: 677
  • unnamed weather station, Boltek, Win7 Pro
    • TiggrWeather
Re: Sample Code for extended loop image slide shows
« Reply #4 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.
John
W7JKG
BUY FROM AMAZON HERE... Thank You! :-)

Offline TNETWeather

  • Kevin Reed (KrelvinAZ)
  • Senior Contributor
  • ****
  • Posts: 193
  • Davis Vantage Pro2+ with full FARS
    • TNET Weather - Mesa, AZ USA
Re: Sample Code for extended loop image slide shows
« Reply #5 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...
« Last Edit: August 19, 2011, 01:11:03 PM by TNETWeather »

All you need is Time, Aptitude and Desire ... and you can build just about anything...

Offline Bunty

  • Forecaster
  • *****
  • Posts: 1354
  • Home of Oklahoma State University
    • Welcome to Stillwater Weather
Re: Sample Code for extended loop image slide shows
« Reply #6 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.

Also the 2nd home page using modified AltDashboard 6.81 at http://stillwaterweather.com/wx/2ndhome.php

Offline jgillett

  • Forecaster
  • *****
  • Posts: 677
  • unnamed weather station, Boltek, Win7 Pro
    • TiggrWeather
Re: Sample Code for extended loop image slide shows
« Reply #7 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!
John
W7JKG
BUY FROM AMAZON HERE... Thank You! :-)

Offline TNETWeather

  • Kevin Reed (KrelvinAZ)
  • Senior Contributor
  • ****
  • Posts: 193
  • Davis Vantage Pro2+ with full FARS
    • TNET Weather - Mesa, AZ USA
Re: Sample Code for extended loop image slide shows
« Reply #8 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.
« Last Edit: August 19, 2011, 03:33:37 PM by TNETWeather »

All you need is Time, Aptitude and Desire ... and you can build just about anything...

Offline TNETWeather

  • Kevin Reed (KrelvinAZ)
  • Senior Contributor
  • ****
  • Posts: 193
  • Davis Vantage Pro2+ with full FARS
    • TNET Weather - Mesa, AZ USA
Re: Sample Code for extended loop image slide shows
« Reply #9 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.

All you need is Time, Aptitude and Desire ... and you can build just about anything...

Offline jgillett

  • Forecaster
  • *****
  • Posts: 677
  • unnamed weather station, Boltek, Win7 Pro
    • TiggrWeather
Re: Sample Code for extended loop image slide shows
« Reply #10 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.
John
W7JKG
BUY FROM AMAZON HERE... Thank You! :-)

Offline TNETWeather

  • Kevin Reed (KrelvinAZ)
  • Senior Contributor
  • ****
  • Posts: 193
  • Davis Vantage Pro2+ with full FARS
    • TNET Weather - Mesa, AZ USA
Re: Sample Code for extended loop image slide shows
« Reply #11 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.

All you need is Time, Aptitude and Desire ... and you can build just about anything...

Online ed2kayak

  • Ed
  • Forecaster
  • *****
  • Posts: 533
  • Davis Vantage Pro2 w/12 hr FARS, solar/uv
    • Cumberland Valley Weather
Re: Sample Code for extended loop image slide shows
« Reply #12 on: August 20, 2011, 02:44:50 PM »
Sample page look good.
Ed
CoCoRaHS PA-CD-6,  Weather Underground KPAMECHA7, CWOP DW5425

Offline TNETWeather

  • Kevin Reed (KrelvinAZ)
  • Senior Contributor
  • ****
  • Posts: 193
  • Davis Vantage Pro2+ with full FARS
    • TNET Weather - Mesa, AZ USA
Re: Sample Code for extended loop image slide shows
« Reply #13 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
« Last Edit: August 20, 2011, 09:45:47 PM by TNETWeather »

All you need is Time, Aptitude and Desire ... and you can build just about anything...

Offline TNETWeather

  • Kevin Reed (KrelvinAZ)
  • Senior Contributor
  • ****
  • Posts: 193
  • Davis Vantage Pro2+ with full FARS
    • TNET Weather - Mesa, AZ USA
Re: Sample Code for extended loop image slide shows
« Reply #14 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

Need to clean things up a bit, add some documentation and it should be ready to go for most.

All you need is Time, Aptitude and Desire ... and you can build just about anything...

Offline Strgazr27

  • "The Cam Man"
  • Forecaster
  • *****
  • Posts: 590
    • Kings Park Weather
Re: Sample Code for extended loop image slide shows
« Reply #15 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
« Last Edit: August 21, 2011, 02:29:49 AM by Strgazr27 »
Bobby M.
Davis VP2 6152 w Daylight FARS - Logitech C525 and C310
WD - WDLive - GRLevel3 - Image Salsa - VVP - Startwatch

"http://www.kingsparkweather.com"
KNYKINGS7 on WU



Offline TNETWeather

  • Kevin Reed (KrelvinAZ)
  • Senior Contributor
  • ****
  • Posts: 193
  • Davis Vantage Pro2+ with full FARS
    • TNET Weather - Mesa, AZ USA
Re: Sample Code for extended loop image slide shows
« Reply #16 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.
« Last Edit: August 21, 2011, 01:47:33 PM by TNETWeather »

All you need is Time, Aptitude and Desire ... and you can build just about anything...

Offline TNETWeather

  • Kevin Reed (KrelvinAZ)
  • Senior Contributor
  • ****
  • Posts: 193
  • Davis Vantage Pro2+ with full FARS
    • TNET Weather - Mesa, AZ USA
Re: Sample Code for extended loop image slide shows
« Reply #17 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

All you need is Time, Aptitude and Desire ... and you can build just about anything...

Offline Silversword

  • --Stan Y.
  • Senior Contributor
  • ****
  • Posts: 280
    • Up Country Maui Weather
Re: Sample Code for extended loop image slide shows
« Reply #18 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

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

--Stan Y.
   Maui, Hawaii
WD 10.37r Build 80
WDL 6.05

MS Windows XP Pro-SP3
Dell Optiplex GX280-Intel Pentium 4 CPU 3.00GHz, 4 GB RAM
Davis Vantage Pro 2 Wireless + 1-Wire Solar  + 1-Wire UV  + 1-Wire Lighting
Webcam: Axis 211

Offline TNETWeather

  • Kevin Reed (KrelvinAZ)
  • Senior Contributor
  • ****
  • Posts: 193
  • Davis Vantage Pro2+ with full FARS
    • TNET Weather - Mesa, AZ USA
Re: Sample Code for extended loop image slide shows
« Reply #19 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

All you need is Time, Aptitude and Desire ... and you can build just about anything...

Offline TNETWeather

  • Kevin Reed (KrelvinAZ)
  • Senior Contributor
  • ****
  • Posts: 193
  • Davis Vantage Pro2+ with full FARS
    • TNET Weather - Mesa, AZ USA
Re: Sample Code for extended loop image slide shows
« Reply #20 on: August 21, 2011, 09:46:20 PM »
another John site....

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. 


All you need is Time, Aptitude and Desire ... and you can build just about anything...

Offline TNETWeather

  • Kevin Reed (KrelvinAZ)
  • Senior Contributor
  • ****
  • Posts: 193
  • Davis Vantage Pro2+ with full FARS
    • TNET Weather - Mesa, AZ USA
Re: Sample Code for extended loop image slide shows
« Reply #21 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.

All you need is Time, Aptitude and Desire ... and you can build just about anything...

Offline TNETWeather

  • Kevin Reed (KrelvinAZ)
  • Senior Contributor
  • ****
  • Posts: 193
  • Davis Vantage Pro2+ with full FARS
    • TNET Weather - Mesa, AZ USA
Re: Sample Code for extended loop image slide shows
« Reply #22 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

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.
« Last Edit: August 23, 2011, 10:45:41 AM by TNETWeather »

All you need is Time, Aptitude and Desire ... and you can build just about anything...

Offline TNETWeather

  • Kevin Reed (KrelvinAZ)
  • Senior Contributor
  • ****
  • Posts: 193
  • Davis Vantage Pro2+ with full FARS
    • TNET Weather - Mesa, AZ USA
Re: Sample Code for extended loop image slide shows
« Reply #23 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.

All you need is Time, Aptitude and Desire ... and you can build just about anything...

Offline jay_hoehn

  • WxElement panel
  • Forecaster
  • *****
  • Posts: 478
    • Jay's Woodcrafts
Re: Sample Code for extended loop image slide shows
« Reply #24 on: September 04, 2011, 12:07:27 PM »
Kevin,

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

Jay
Davis Vantage Pro2 Plus
VVP
VWS
Cumulus
WeatherFlash
Image Salsa

 

anything