Topic: New Script to Display US NWS Graphical Forecast Maps

[gwwilk]

This package uses maps from graphical.weather.gov's site to display 13 different slideshows.  It has been preconfigured so that all that is necessary to install it into a SaratogaWx template website is to copy the WxUSFCSShow directory with contents to your site, and then move wxusfcsshow.php and if desired wxusfcsshow_all.php to your site's root directory.  A listing in the flyout-menu.xml menu system might also be a good idea if you want it available to others.

The package's output may be seen here and in long form here.  I think the     long form 'all' display is very unwieldy, and this led to the clickable one-at-a-time slideshow script.

The included WxUSFCSShow.txt contains more information.

[MackerelSky]

He Jerry,

Hope things are well.

I had to make a couple of changes to two files to get your very nice script to work for me and I thought I'd pass them along incase someone else has the same issues. I did as you suggested and uploaded the entire directory to my website and then put the wxusfcsshow.php into my root. The page came up alright, but no maps.

At the top of the wxusfcsshow.php inside the head tags of the page, you have these two lines

Code: [Select]

<script src="./jquery/swissarmy.js" type="text/javascript"></script>
<script src="./jquery/wxusfcsshow.js" type="text/javascript"></script>
but no 'jquery' in the directory, so I changed it to this and it worked

Code: [Select]

<script src="./WxUSFCSShow/scripts/swissarmy.js" type="text/javascript"></script>
<script src="./WxUSFCSShow/scripts/wxusfcsshow.js" type="text/javascript"></script>
Then, at the top of the wxusfcsshow.js I had to make a small change to get my images to show up

Code: [Select]

var previmg='../WxUSFCSShow/images/previous.gif';
var stopimg='../WxUSFCSShow/images/pause.gif';
var playimg='../WxUSFCSShow/images/play.gif';
var nextimg='../WxUSFCSShow/images/next.gif';
removing a '.' from each path

Code: [Select]

var previmg='./WxUSFCSShow/images/previous.gif';
var stopimg='./WxUSFCSShow/images/pause.gif';
var playimg='./WxUSFCSShow/images/play.gif';
var nextimg='./WxUSFCSShow/images/next.gif';
But I still have a small issue and I wonder if you could shed some light. When I load the page for about 10 seconds I get a 'phantom' 7day precipitation map below the temperature map and then it goes away. Would there be something else I need to do?

Thanks for your time and no rush on my part
Brad

[gwwilk]

Thanks for the kind words, Brad.  I was aware of the './jquery/' path problem almost immediately after I uploaded the package, and I thought I had corrected the problem.  It seems that I'm too new at this to have developed a versioning system that will keep me on the straight and narrow because I deleted the corrected package and not the uncorrected one!

The '../WxUSFCSShow/' problem in wxusfcsshow.js (and other kindred javascripts in the new package--more on that in a moment) apparently varies from server to server.  This path is what works on my GoDaddy Apache server as well as with my Dreamweaver 'Live' and my WAMP Apache 'localhost' server.  Someone more knowledgeable than I might offer a solution, but I don't have one at the moment.

The additional scripts in the package allow for the selection of a slideshow version with the slideshows 'off' initially, rather than 'on'.  Just uploading the new package and then moving the php scripts to the root and then using 'wxusfcsshow_noauto.php' rather than 'wxusfcsshow.php' should display slideshows that will need to be started by the user.  I made this version after I grew tired of seeing the slideshows display slides somewhere in the middle of the show when I switched to it.  The wxusfcsshow_auto.js is identical to wxusfcsshow.js and is included as a backup in case you want to copy the '_noauto' version, delete wxusfcsshow.js, rename the copy as wxusfcsshow.js and continue to use wxufscsshow.php to display them.

I would urge anyone who downloaded the previous package to download and use the new one.  My apologies for the broken scripts.

Regarding the 'ghost' image, I don't see that, Brad.  The package, like all of my scripts, relies heavily on a broadband connection in that it downloads ALL of the slideshows when first loaded.  The individual NWS graphics are small, just a few KB's, but they do add up.  The 'ghost' is probably there while the downloads are underway.  I'll look into this issue, but I'm not certain there's anything to do about it.

[MackerelSky]

Hi Jerry,

I definitely wasn't ragging about the setup, it went smooth during the install except the two minor items I brought up. I went with your setup with the main file in root and the rest in a separate directory because we all probably have to many files in the root of our sites already, at least I do...by no means were your scripts broken...

I was wondering if it was just me on the extra image since I'm on a sattelite connection and the latency can do that on occasion, so if no one else reports that as a problem, don't worry about it on this end...

Again, thanks for the scripts...
Brad

[gwwilk]

You're welcome, Brad.  I appreciate your keen eye and your help.

I'm still playing around with presentation, and here are a couple more php files that use unordered lists rather than a paragraph with line breaks in order to present the selections in a little more orderly fashion. They are included in the attached package, version 1b.  All scripts should validate at validator.w3c.org

[Dr Obbins]

Nice Script!  Worked out of the box and was easy to customize to match the website style.
Thanks
NWS US Forecast Map Slideshows

[gwwilk]

Thanks!  It looks good on your site.

Links to the unordered list selectors on my site are no-auto-slideshow and auto-slideshow.

[MackerelSky]

I've re-downloaded the zip Jerry and see that you have added the 'no-auto' scripts and I'll have a play later today on Wamp and see which one I decide to put live, thanks for the efforts...

I've decided that since you are in Landlocked Nebraska that you haven't changed 'Wave Heigh' to 'Wave Height' in your php... dig dig dig *line 89*

All the best Jerry

Brad

[gwwilk]

   That messpelling propagated throughout all of the php scripts!  Thanks for picking up on that, Brad.

Amended files attached.

[Albuquerque Weather]

 That messpelling propagated throughout all of the php scripts!  Thanks for picking up on that, Brad.

Amended files attached.

Thankyou for all your efforts Jerry - much appreciated.
Ron

[tstorm]

Thanks for the great script Jerry.

For anyone that's interested the NWS is accepting comments through May 31, 2013, on an experimental National Digital Forecast Database (NDFD) map viewer.

http://preview.weather.gov/graphical/

John

[Jumpin Joe]

Jerry, Thanks for another great script! 

Your efforts are greatly appreciated.

Joe

[Bunty]

Here's mine after some customization:  http://stillwaterweather.com/wx/wxusfcsshow.php

[gwwilk]

Here's mine after some customization:  http://stillwaterweather.com/wx/wxusfcsshow.php

Looks good, Bunty.  Just don't forget to correct my misspelled 'Heigh'

[rrrick8]

Thanks for the script Jerry.
Have it going with a few cosmetic changes here

[tnwxman]

Thank you Jerry for a great script.

[mkutche]

It worked before now not sure why it's not now. http://gosportwx.com/wxusfcsshow.php

edit: Forgot to change the script URL from ./WxUSFCSShow/scripts... to just ./scripts

[jonnyj771]

Jerry,

Liking the script. However, I have an issue getting the image to show up. I had it at first, but now I cannot see the image. I believe it may be a permission issue. but unclear.
I am using this on the Leuven Template. I just took the original wxusfcsshow.php script and placed it in a Leuven script New page so I could contain the stylesheets.


Permissions are set like all the others at 755 (seems to work with all of the other pages as that is what my provider seems to authorize).
Can you provide any insight?
http://lightningweather.com/sl/index.php?p=USForecastPage&lang=en#data-area

[Jáchym]

Is your site working?

This is what I get:
This webpage is not available

[jonnyj771]

Is your site working?

This is what I get:
This webpage is not available

I have been doing updates...I had a minor glitch that I overlooked in the menu file...fixed already. You should be able to access the site now.

[Jáchym]

http://lightningweather.com/:

This webpage is not available

ERR_CONNECTION_REFUSED

[jonnyj771]

http://lightningweather.com/:

This webpage is not available

ERR_CONNECTION_REFUSED

Not sure why you are getting that error. I'm opening it fine on chrome

Sent from my SM-G935R4 using Tapatalk

[Jáchym]

Could it be that you are blocking European IPs? I can check when Im at work, I have VPN there so I can try U.S. IP

[jonnyj771]

Could it be that you are blocking European IPs? I can check when Im at work, I have VPN there so I can try U.S. IP

It shouldn't be blocked.
Wim has accessed it from Belgium before
Try going to http://lightningweather.com
first. Maybe that will help. I put the US forecast Page in the "Other Forecasts" sub menu
Sent from my SM-G935R4 using Tapatalk

[MackerelSky]

Hey Jon

Page loads fine, well, almost fine for me, but I think your problem is that you've made a mistake in your location of the main scripts for the slideshow. This section below, located at line 218 in your page should be up, inside of your </head> tag and not in the <body> part of your page.
Also remove that extra
</head>
<body>
at the end of it. It's just a copy and paste error. Get the part below into your head tag and you should be fine.

Code: [Select]

<!-- module wsusfcsshow.php ==== version: 1.0c -->
<link rel="stylesheet" type="text/css" href="./WU-History/WU-HistoryGray.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="./usa/WxUSFCSShow/scripts/swissarmy.js" type="text/javascript"></script>
<script src="./usa/WxUSFCSShow/scripts/wxusfcsshow.js" type="text/javascript"></script>

<style type="text/css">
/* Slideshow */
.hidden {
 display: none;
 margin: auto;
}
.visible {
 display:  block;
 margin: auto;
}
.center{
 margin: auto;
}

</style>
<script type="text/javascript">
window.onload=function(){show_tab2("d7tempfc")};
</script>
</head>
<body>