vBulletin CMS Widgets - YoWindow Weather Widget

What is it?
A simple template modification to bring the YoWindow Weather Widget to vB4

Originally Posted by YoWindow Website

YoWindow weather widget works like your window - a landscape reflects the weather. You see weather picture, not just numbers. The widget designed to work on any website including Blogger, Wordpress and MySpace. Click the widget to enter full screen mode.

1. Firstly, you need to set up a new Profile Field. Choose Single-Line Text Box

Title: Weather Location Code
Description: (Whatever you want - here's what I use because the process might confuse some users)

If you want to display the weather for your region/location on our index page - go to <a href="http://yowindow.com/weatherwidget.php">YoWindow Weather Widget</a> and fill in the details and generate your code. You now need the number that appears like the hightlight red text <b>location_id=gn:<i><font color="red">1234567</i></font>& - add that number in this box.

Required Field: No, but display at registration
Field Editable by User: Yes
Private Field: Yes
Field Searchable on Members List: No
Show on Members List: No
Display Page: Edit Profile

Take note of the newly created profile field number.

2. Next you need to create a new template. Go to AdminCP > Styles & Templates > Style Manager > Add New Template

Title: block_weather

<center><li>
    <div class="block smaller">
        <div class="blocksubhead">
            <a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>
            <span class="blocktitle">{vb:raw blockinfo.title}</span>
        </div>
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<vb:if condition="$bbuserinfo[fieldXX] !=''"> 
            <div style="width:230px; height:150px;">
    <object type="application/x-shockwave-flash" data="http://swf.yowindow.com/yowidget3.swf" width="220" height="150">
        <param name="movie" value="http://swf.yowindow.com/yowidget3.swf"/>
        <param name="allowfullscreen" value="true"/>
        <param name="wmode" value="opaque"/>
        <param name="bgcolor" value="#FFFFFF"/>
        <param name="flashvars" 
        value="location_id=gn:{vb:raw bbuserinfo.fieldXX}&amp;time_format=24&amp;us=metric&amp;background=#FFFFFF&amp;mini_locationBar=false&amp;copyright_bar=false"
    />
        <a href="http://yowindow.com/weatherwidget.php"
        style="width:220px;height:150px;display: block;text-indent: -50000px;font-size: 0px;background:#DDF url(http://yowindow.com/img/logo.png) no-repeat scroll 50% 50%;"
        >HTML weather</a>
    </object>
</div>
<div style="width: 220px; height: 15px; font-size: 14px; font-family: Arial,Helvetica,sans-serif;">
    <span style="float:left;"><a target="_top" href="http://yowindow.com?client=widget&amp;link=copyright" style="color: #2fa900; text-decoration:none;" title="Desktop weather">YoWindow.com</a></span>
    <span style="float:right; color:#888888;"><a href="http://yr.no" style="color: #2fa900; text-decoration:none;">yr.no</a></span>
</div>
<vb:else />
<br/><b>Add your <a href="{vb:raw vboptions.bburl}/profile.php?do=editprofile">Weather Location Code</A> to show your weather forecast in this block. <br/></b>   </vb:if>
        </div>
        </div>
    </div>
    <div class="underblock"></div>
</li></center>

Replace the XX (2 times) with the number of the profile field you created earlier.

3. Go to AdminCP > Forums & Moderators > Forum Blocks Manager > Add Block

Title: Weather Forecast
Content Type: HTML
Content: <div></div>
Template To Use: block_weather

Now, this part may prove tricky for some going by what I've seen in other weather widget modifications so I'll try and make it simple and add a few pictures, this process is also required to be done by your members to display their local forecast.

Go to http://yowindow.com/weatherwidget.php and fill in your details and generate the code. The only part of the code you need is the number after id=gn: and before &amp;. Take note of that number and go to Edit Profile on your site, scroll down to the newly made Weather Code Location and blurb box and enter the number. Save your profile. Go back to your forum home and the new block should display with your weather details for the next 5 days. Click on the scenery image and it will expand to full-screen and give a more detailed outlook.

How To Add Location Scenery (village, seaside, airport or oriental) To Your Weather Widget - https://vborg.vbsupport.ru/showpost....1&postcount=24

How To Add Weather Widget To Member Profiles - https://vborg.vbsupport.ru/showpost....4&postcount=18

Added: 28.12.2012 An alternative version that uses IP location to display the weather rather than creating and entering data into a profile field can be found here - https://vborg.vbsupport.ru/showpost....8&postcount=36. It also allows the user to display weather forecasts from many other locations via dropdown menus.

If anyone wants to further develop any of my addons, you are free to do so.

[Gemma]

Originally Posted by Krusty1231

Working great! Thanks!

Thank you

[Gemma]

I've updated part of the code, it should still work with the old code but if you want to upgrade find:

<object type="application/x-shockwave-flash" data="http://swf.yowindow.com/wimo/hpPal/hpPal.swf" width="220" height="150">
        <param name="movie" value="http://swf.yowindow.com/wimo/hpPal/hpPal.swf"/>
        <param name="allowfullscreen" value="true"/>
        <param name="wmode" value="opaque"/>
        <param name="bgcolor" value="#FFFFFF"/>

Change it to:

<object type="application/x-shockwave-flash" data="http://swf.yowindow.com/yowidget3.swf" width="220" height="150">
        <param name="movie" value="http://swf.yowindow.com/yowidget3.swf"/>
        <param name="allowfullscreen" value="true"/>
        <param name="wmode" value="opaque"/>
        <param name="bgcolor" value="#FFFFFF"/>

[Krusty1231]

Is there a way to add the different scenes to this? On the "block" all I can get is the country side looking one, but on profiles I got the airport one by playing with the code alittle....how would one make the airport or the other scenes work on block?

Or is this even possible?

Thanks in advance.

[Gemma]

Originally Posted by Krusty1231

Is there a way to add the different scenes to this? On the "block" all I can get is the country side looking one, but on profiles I got the airport one by playing with the code alittle....how would one make the airport or the other scenes work on block?

Or is this even possible?

Thanks in advance.

There are two ways you could do this. One would be to find amp;us=metric&amp; in the code and after that add landscape=AAAAAAA&amp; where AAAAAAA would be either village, seaside, airport or oriental. This would however set all the location scenery to whatever option you choose.

Or you could do it this way.

Create a new user profile field.

Profile Field Type: Single-Selection Radio ButtonTitle: Weather Location Scene
Description: Choose from Village, Seaside, Airport and Oriental imagery for the background of your weather forecast report.
Options:
village
seaside
airport
oriental
Set Default: Yes
Field Required: No
Field Editable By User: Yes
Private Field: Yes
Field Searchable on Members List: No
Show on Members List: No

Take note of the profile field number.
Save
Note: the scenery options must be in lowercase letters (village, seaside, airport or oriental).

In your template find

amp;us=metric&

Right after that put (where YY is the profile field number)

{vb:raw bbuserinfo.fieldYY}

So it looks like

amp;us=metric&{vb:raw bbuserinfo.fieldYY}

Save the template.

[Krusty1231]

Wow, just wow. Thank you very much. I used the first option you gave, as I then can switch it up for the members when I want them to see something different.

Thank you for taking the time Gemma! Very much appreciated.

[Gemma]

Originally Posted by Krusty1231

Wow, just wow. Thank you very much. I used the first option you gave, as I then can switch it up for the members when I want them to see something different.

Thank you for taking the time Gemma! Very much appreciated.

You are more than welcome

[MoreLinux]

Thanks, Gemma. Installed this one on my test board and it look super cool!!

[MoreLinux]

@Gemma, Your widget language stays in English, but the original yowindow widget can change the language.

I changed the line

value="location_id=gn:{vb:raw bbuserinfo.fieldXX}&time_format=24&us=metric&background=#FFFFFF&mini_locationBar=false&copyright_bar=false"

and included the lang=nl&amp; option. Now it looks like this and the day's of the week are displayed in Dutch.

value="location_id=gn:{vb:raw bbuserinfo.fieldXX}&time_format=24&us=metric&lang=nl&background=#FFFFFF&mini_locationBar=false&copyright_bar=false"

[Gemma]

Originally Posted by MoreLinux

@Gemma, Your widget language stays in English, but the original yowindow widget can change the language.

I changed the line

value="location_id=gn:{vb:raw bbuserinfo.fieldXX}&time_format=24&us=metric&background=#FFFFFF&mini_locationBar=false&copyright_bar=false"

and included the lang=nl&amp; option. Now it looks like this and the day's of the week are displayed in Dutch.

value="location_id=gn:{vb:raw bbuserinfo.fieldXX}&time_format=24&us=metric&lang=nl&background=#FFFFFF&mini_locationBar=false&copyright_bar=false"

I didn't pick up on that, good spot

[MoreLinux]

I have this mod now running on my board in the CMS as a widget, but changed the code a tiny bit so that it auto-scales. Now the code looks like this (my changes are marked in RED)

<div class="cms_widget">
    <div class="block">
        <div class="cms_widget_header">
        <h3><img src="{vb:stylevar imgdir_siteicons}/html.png" alt="" /> {vb:raw widget_title}</h3>
        </div>
        <div class="cms_widget_content_restore_widget_content">
        <center>

            <div style="width:auto; height:200px;">
        <object type="application/x-shockwave-flash" data="http://swf.yowindow.com/yowidget3.swf" width="100%" height="100%">
        <param name="movie" value="http://swf.yowindow.com/yowidget3.swf"/>
        <param name="allowfullscreen" value="true"/>
        <param name="wmode" value="opaque"/>
        <param name="bgcolor" value="#FFFFFF"/>
        <PARAM NAME="SCALE" VALUE="exactfit">
        <param name="flashvars" 
<vb:if condition="$bbuserinfo[field9] !=''">
        value="location_id=gn:{vb:raw bbuserinfo.field9}
<vb:else />
        value="location_id=gn:2745912
</vb:if>
&amp;time_format=24&amp;unit_system=metric&amp;lang=nl&amp;background=#FFFFFF&amp;mini_locationBar=true&amp;copyright_bar=false"/>
        <a href="http://yowindow.com?client=widget&amp;link=stub"
        style="width:220px;height:150px;display: block;text-indent: -50000px;font-size: 0px;background:#DDF url(http://yowindow.com/img/logo.png) no-repeat scroll 50% 50%;"
        >Desktop weather</a>
    </object>
</div>
<div style="width: 220px; height: 15px; font-size: 14px; font-family: Arial,Helvetica,sans-serif;">

</div>
        </div>
</center>
            </div>
</div>

I also changed the location of the <vb:if condition="$bbuserinfo[field9] !=''"> a bit so that when a user or a guest user have no ID it defaults to a city in the middle of The Netherlands.