advforecast2.php V4.00 support for NWS dual-image icons

The NWS is set to implement the dual-image forecast icons on 7-Jul-2015, and the advforecast2.php script has been updated (V4.00) to support both ‘old’ and ‘new’ forecast automatically.

The dual-images are dynamically created by a DualImage.php script (which I kinda reverse-engineered from the NWS version as there was no code available for their official version) by combining up to two icon template images to form a new image with 6-hour periods, and individual numbers for PoP where needed.
The new companion DualImage.php script and the associated icon templates (in ./forecast/icon-templates) is available
as a download for standalone users (along with the advforecast2.php script download) from the
script page at http://saratoga-weather.org/scripts-carterlake.php#advforecast

Also available there is a newer set of PoP-stamped .jpg icons at 55x55px sizing to match the newer NWS icons.

For Base-USA template users, the Update tool page has the complete updates (with the new icons that weren’t included in the saratoga-icons.zip set). Use query for Base-USA, Plugin-*, 06-Jul-2015 to get the complete .zip file.

Folks using the meteotriviglio animated GIF icons will NOT have dual-images displayed – only the first 6-hour image will show up. It’s just too involved to take apart two animated GIFs, extract parts, combine on new images and remake the single animated GIF. Also, the following NEW NWS images would be needed from Meteotriviglio to complete the current icon set:

hur_warn.gif
hur_watch.gif
nsnip.gif
nsnip10.gif
nsnip100.gif
nsnip20.gif
nsnip30.gif
nsnip40.gif
nsnip50.gif
nsnip60.gif
nsnip70.gif
nsnip80.gif
nsnip90.gif
nwind_bkn.gif
nwind_few.gif
nwind_ovc.gif
nwind_sct.gif
nwind_skc.gif
snip.gif
snip10.gif
snip100.gif
snip20.gif
snip30.gif
snip40.gif
snip50.gif
snip60.gif
snip70.gif
snip80.gif
snip90.gif
ts_nowarn.gif
ts_warn.gif
ts_watch.gif
wind_bkn.gif
wind_few.gif
wind_ovc.gif
wind_sct.gif
wind_skc.gif

For once, I’m trying to make the update available BEFORE the change to the NWS website :slight_smile: :roll:

Best regards,
Ken

Does this mean the “old” script will fail after 7/7 ?

If the NWS includes a dual-image icon in your forecast, yes… the old script will ‘fail’ (show a broken image, or a ‘N/A’ image).

Effective July 7, 2015, NWS will implement changes to the icons depicted on all of its Point Forecast pages. Highlights will include new icons with increased clarity, 6-hour increments for rapidly changing weather and new color blocks to highlight forecast hazards.

OK, it’s installed and just waiting for tomorrow :slight_smile:

You can check out your dual-image support by trying this on your website:

DualImage.php?i=scttsra&j=ra&ip=10&jp=50

You should see something like the attached :slight_smile:

Best regards,
Ken


dual-image-sample.jpg

Thanks again Ken for all you hard work :slight_smile:

Here it is on a WXSIM Forecast

Doug

Yup, that works :smiley:

Thanks for yet another update.

So what will happened if were using the animated icons when the switch happens?

They’ll still work (except for the ones that are missing in the new NWS list of icons in the first post).
If your location receives a DualImage request, then the V4.00 advforecast.php script will generate a link to the first icon in the pair (with PoP if specified).

For example, in the string I’d used with Niko above

the request for DualImage.php?i=scttsra&j=ra&ip=10&jp=50 would result in an image link to ./forecast/images/scttsra10.gif to display … the plain rain icon request would be ignored.

Hopefully, Meteotriviglio will generate the missing icons to include in his set – the issue about dynamically creating the animated GIF dual-icons will remain for the indefinite future. If you want the dual-icons to display, you’ll need to switch back to .jpg icons … sorry :frowning:

Thanks, Ken, for all your hard work in setting this up. I’ve decided to give the dual icons a try after having used the Meteotriviglio icons for several years. I haven’t changed my ajaxWDwx3.js setting for the current condition icon from .gif to .jpg yet however, so it is still animated.

Mine has defaulted to the zone this AM, seems to be happening more and more recently :frowning:

Good job we cancelled that backpacking trip to the mountains though…

Looks like this week you could use that lightning detector. :lol:

Ken, is there somewhere in the advforecast2.php script I can put a break in?

The text on my dashboard is running into the icons sometimes.


forecast.jpg

I’m going to do an update to handle the lack of image:text breaks.

http://www.wxforum.net/index.php?topic=25891.msg256878#msg256878

Ken…Thank you for the update and your hard work…

it all worked just fine!

Steve :smiley:

Excellent! Thanks for letting me know, Steve.

Best regards,
Ken

The update is ready - advforecast2.php V4.01 does fix the text-flow around the icon and the HTML validation issues.

For Base-USA template users, the Update tool page has the complete updates (with the new icons that weren’t included in the saratoga-icons.zip set). Use query for Base-USA, Plugin-*, 07-Jul-2015 to get the .zip file.
Note: if you had not installed the 06-Jul-2015 update, the use that date for the query to get all the files needed.

Standalone users, use the script page for source and icons.

Best regards,
Ken

Incorporated update 07-Jul-2015 for advforecast2.php V4.01 and forecasts looking good here.

Thanks Ken!

http://wx4mt.com/wxforecast.php

You’re welcome!

For those folks running Scott’s alternative dashboard 692, you will see all the stuff in the proper places, but vertical alignment will be missing. I did some experimentation with the ajax-dashboard6 and found that some code changes in the dashboard could fix the alignment issues.

Change (for the quick-look 3 day icons)

            <table align="center" width="230" border="0" cellpadding="0" cellspacing="4">
                <tr>
                    <td class="data1" align="center" style="text-align: center; font-size: 11px; border: 1px solid gray;" >
                        <?php echo $forecasticons[0]; ?>

                        <?php echo $forecasttemp[0]; ?>
                    </td>
                    <td align="center" style="text-align: center; font-size: 11px; border:  1px solid gray;" >
                        <?php echo $forecasticons[1]; ?>

                        <?php echo $forecasttemp[1]; ?>
                    </td>
                    <td align="center" style="text-align: center; font-size: 11px; border:  1px solid gray;" >
                        <?php echo $forecasticons[2]; ?>

                        <?php echo $forecasttemp[2]; ?>
                    </td>
                </tr>

to

            <table align="center" width="230" border="0" cellpadding="0" cellspacing="4">
                <tr>
                    <td class="data1" valign="top" align="center" style="text-align: center; font-size: 11px; border: 1px solid gray;" >
                        <?php echo $forecasticons[0]; ?>
                    </td>
                    <td align="center" valign="top" style="text-align: center; font-size: 11px; border:  1px solid gray;" >
                        <?php echo $forecasticons[1]; ?>
                    </td>
                    <td align="center" valign="top" style="text-align: center; font-size: 11px; border:  1px solid gray;" >
                        <?php echo $forecasticons[2]; ?>
                    </td>
                </tr>
                <tr>
                    <td class="data1" valign="top" align="center" style="text-align: center; font-size: 11px; border: 1px solid gray;" >
                        <?php echo $forecasttemp[0]; ?>
                    </td>
                    <td align="center" valign="top" style="text-align: center; font-size: 11px; border:  1px solid gray;" >
                        <?php echo $forecasttemp[1]; ?>
                    </td>
                    <td align="center" valign="top" style="text-align: center; font-size: 11px; border:  1px solid gray;" >
                        <?php echo $forecasttemp[2]; ?>
                    </td>
                </tr>

Then change (for the rest of the icons at the bottom of the page)

        <table style="text-align:center;" width="100%" border="1" cellpadding="2" cellspacing="2">
            <tr>
                <td style="font-size: 10px;">
                    <?php echo $forecasticons[2]; ?>

                    <?php echo $forecasttemp[2]; ?>
                </td>
                <td style="font-size: 10px;">
                    <?php echo $forecasticons[3]; ?>

                    <?php echo $forecasttemp[3]; ?>
                </td>
                <td style="font-size: 10px;">
                    <?php echo $forecasticons[4]; ?>

                    <?php echo $forecasttemp[4]; ?>
                </td>
                <td style="font-size: 10px;">
                    <?php echo $forecasticons[5]; ?>

                    <?php echo $forecasttemp[5]; ?>
                </td>
                <td style="font-size: 10px;">
                    <?php echo $forecasticons[6]; ?>

                    <?php echo $forecasttemp[6]; ?>
                </td>
                <td style="font-size: 10px;">
                    <?php echo $forecasticons[7]; ?>

                    <?php echo $forecasttemp[7]; ?>
                </td>
                <td style="font-size: 10px;">
                    <?php echo $forecasticons[8]; ?>

                    <?php echo $forecasttemp[8]; ?>
                </td>
            </tr>   
        </table>

to

        <table style="text-align:center;" width="100%" border="1" cellpadding="2" cellspacing="2">
            <tr>
                <td valign="top" style="font-size: 10px;">
                    <?php echo $forecasticons[2]; ?>
                </td>
                <td valign="top" style="font-size: 10px;">
                    <?php echo $forecasticons[3]; ?>
                </td>
                <td valign="top" style="font-size: 10px;">
                    <?php echo $forecasticons[4]; ?>
                </td>
                <td valign="top" style="font-size: 10px;">
                    <?php echo $forecasticons[5]; ?>
                </td>
                <td valign="top" style="font-size: 10px;">
                    <?php echo $forecasticons[6]; ?>
                </td>
                <td valign="top" style="font-size: 10px;">
                    <?php echo $forecasticons[7]; ?>
                </td>
                <td valign="top" style="font-size: 10px;">
                    <?php echo $forecasticons[8]; ?>
                </td>
            </tr>   
            <tr>
                <td valign="top" style="font-size: 10px;">
                    <?php echo $forecasttemp[2]; ?>
                </td>
                <td valign="top" style="font-size: 10px;">
                    <?php echo $forecasttemp[3]; ?>
                </td>
                <td valign="top" style="font-size: 10px;">
                    <?php echo $forecasttemp[4]; ?>
                </td>
                <td valign="top" style="font-size: 10px;">
                    <?php echo $forecasttemp[5]; ?>
                </td>
                <td valign="top" style="font-size: 10px;">
                    <?php echo $forecasttemp[6]; ?>
                </td>
                <td valign="top" style="font-size: 10px;">
                    <?php echo $forecasttemp[7]; ?>
                </td>
                <td valign="top" style="font-size: 10px;">
                    <?php echo $forecasttemp[8]; ?>
                </td>
            </tr>   
        </table>

and that should line them up better.

Best regards,
Ken