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]

I think the block_weather template is wrong. Can you replace the code with this

<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">
            <center><div><li>
    <!-- Location Chooser component -->
    <script type="text/javascript" src="http://js.yowindow.com/js/yolc.js"></script>
<!-- YoWindow widget component -->
    <script type="text/javascript" src="http://js.yowindow.com/js/yowidget.js"></script>     
    <script language="JavaScript">
 
//To track if commands can be sent to YoWidget
        window.isYoWidgetReady = false;
 
        function onLoad() {
            installLocationChooser();
            installYoWidget();
        }
 
        function installLocationChooser() {
            var place = document.getElementById('location_chooser_place');
//Create YoLocationChooser and keep it as a variable of HTML window
            this.locationChooser = new YoLocationChooser(place);
 
//Subscribe to onLocationChange event
            this.locationChooser.onLocationChange = onLocationChange;
 
/**
lc.open(); - let the user to choose the location, starting on country-level
lc.open("#auto"); - detect location by IP and open it
lc.open("United Kingdom/Stirling"); - open London
*/
            this.locationChooser.open("#auto");
        }
 
/**
Event of YoLocationChooser
It is called every time the location changes.
When location was deselected - node is null
node format
node = {
    @id, // GeoNames id
    @name, // Name from the Geonames data-base
    @p // Population
}
 
Here we reflect selected location in the widget.
*/
        function onLocationChange(node) {
//Do not do anything if location was deselected (node is null).
            if (!node) {
                return;
            }
            var locationId = node['@id'];
 
//You can call yowidget methods only after it gets ready to intercept commands
            var yowidget = document.getElementById('yowidget');
            if (!window.isYoWidgetReady) {
                return;
            }
//Select location in YoWindow widget
            yowidget.setLocationId(locationId);
        }
 
/**
Creates YoWindow widget and adds it to the place-holder "yowidget_place"
*/
        function installYoWidget() {
 
/**
flashvars parameters
See http://yowindow.com/widget_parameters.php
 
I have put some examples in the code, uncomment to see them in effect
*/
            var flashvars = {
//              location_id: "auto"
//              landscape: "airport",
//              background: "#FFFFFF",
//              lang: "de",
                unit_system: "us",
                u_temperature: "c",
//              time_format: "24"
            };
 
/**
Flash parameters
*/
            var params = {
                quality: "high",
                bgcolor: "#FFFFFF",
                allowscriptaccess: "always",
                allowfullscreen: "true",
                wmode: "opaque"
            };
 
            var attributes = {
//Optionally control the color of the copyright text
//              copyright_color: "#0000FF",
//              copyright_link_color: "#FF0000",
 
//id and name of YoWindow widget in HTML DOM
                id: "yowidget",
                name: "yowidget"
            };
 
            YoWidget.embed(
                "yowidget_place", //place-holder id
                240, //width
                150, //height
                flashvars,
                params,
                attributes
            );
        }
 
//This function is called by YoWidget SWF when it is ready for commands
        function yowidget_onReady() {
            window.isYoWidgetReady = true;
            var yowidget = document.getElementById('yowidget');
//Display location selected in Chooser if any
            var node = this.locationChooser.selectedLocation;
            if (node) {
                var locationId = node['@id'];
                yowidget.setLocationId(locationId);
            }
        }
 
    </script>

 
<body onLoad="onLoad();">
 
    <div>
        <span id="yowidget_place" style="display:inline-block;">
        </span>

 <span id="location_chooser_place" style="display:inline-block; width:240px; vertical-align:top;">
        </span>
    </div><br/>
<div><center><b>Click the image for expanded forecast.</b></center></div>

 
        </div>
        </div>
    </div>
    <div class="underblock"></div>
</li>

[thermax04]

Originally Posted by Gemma

I think the block_weather template is wrong. Can you replace the code with this

Yes , it is working correctly in any where now:up:
So, what was wrong

[Gemma]

It had some extra code (closing <div> tags near the bottom of the block_weather template code) which were breaking the other blocks in your style and pushing them to the bottom of the page.

If you are using this, please mark as install so I can see if it is worth updating it on here in the future

[thermax04]

Originally Posted by Gemma

It had some extra code (closing <div> tags near the bottom of the block_weather template code) which were breaking the other blocks in your style and pushing them to the bottom of the page.

If you are using this, please mark as install so I can see if it is worth updating it on here in the future

Marked, Thanks:up:

[dorans]

Nice job, thanks :up:

[CoZmicShReddeR]

Gemma my issue is with just Chrome! On the YoWeather site it reverts to Celsius! When I visit my website and the YoWeather site with IE and Firefox it shows it in Fahrenheit... So the coding is ok it's something between my Chrome webbrowser and YoWeather

[mofeu]

Hi ,

I have the version 4.2.0 but I don't find Go to AdminCP > Styles & Templates > Style Manager > Add New Template but Add New Style.
What I have to do?

Also at AdminCP > Forums & Moderators > Forum Blocks Manager > Add Block
I have to choose Select Block Type (block entries,latest stat uses,custom html/php,New Forum post,Group Discussion,Tag Clouds,Forum Threads)

Can I use http://yowindow.com/weatherwidget.php more than one countries?

[mofeu]

Originally Posted by Gemma

Here is an alternative method of displaying the widget. In this one it should display your weather according to your IP and also give you the option to view other locations.

To use this method, create a new template called block_weather and copy the following code:

<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">
<!-- Location Chooser component -->
    <script type="text/javascript" src="http://js.yowindow.com/js/yolc.js"></script>
<!-- YoWindow widget component -->
    <script type="text/javascript" src="http://js.yowindow.com/js/yowidget.js"></script>     
    <script language="JavaScript">
 
//To track if commands can be sent to YoWidget
        window.isYoWidgetReady = false;
 
        function onLoad() {
            installLocationChooser();
            installYoWidget();
        }
 
        function installLocationChooser() {
            var place = document.getElementById('location_chooser_place');
//Create YoLocationChooser and keep it as a variable of HTML window
            this.locationChooser = new YoLocationChooser(place);
 
//Subscribe to onLocationChange event
            this.locationChooser.onLocationChange = onLocationChange;
 
/**
lc.open(); - let the user to choose the location, starting on country-level
lc.open("#auto"); - detect location by IP and open it
lc.open("United Kingdom/Stirling"); - open London
*/
            this.locationChooser.open("#auto");
        }
 
/**
Event of YoLocationChooser
It is called every time the location changes.
When location was deselected - node is null
node format
node = {
    @id, // GeoNames id
    @name, // Name from the Geonames data-base
    @p // Population
}
 
Here we reflect selected location in the widget.
*/
        function onLocationChange(node) {
//Do not do anything if location was deselected (node is null).
            if (!node) {
                return;
            }
            var locationId = node['@id'];
 
//You can call yowidget methods only after it gets ready to intercept commands
            var yowidget = document.getElementById('yowidget');
            if (!window.isYoWidgetReady) {
                return;
            }
//Select location in YoWindow widget
            yowidget.setLocationId(locationId);
        }
 
/**
Creates YoWindow widget and adds it to the place-holder "yowidget_place"
*/
        function installYoWidget() {
 
/**
flashvars parameters
See http://yowindow.com/widget_parameters.php
 
I have put some examples in the code, uncomment to see them in effect
*/
            var flashvars = {
                location_id: "auto"
//              landscape: "seaside",
//              background: "#FFFFFF",
//              lang: "de",
//              unit_system: "metric",
//              time_format: "24"
            };
 
/**
Flash parameters
*/
            var params = {
                quality: "high",
                bgcolor: "#FFFFFF",
                allowscriptaccess: "always",
                allowfullscreen: "true",
                wmode: "opaque"
            };
 
            var attributes = {
//Optionally control the color of the copyright text
//              copyright_color: "#0000FF",
//              copyright_link_color: "#FF0000",
 
//id and name of YoWindow widget in HTML DOM
                id: "yowidget",
                name: "yowidget"
            };
 
            YoWidget.embed(
                "yowidget_place", //place-holder id
                240, //width
                150, //height
                flashvars,
                params,
                attributes
            );
        }
 
//This function is called by YoWidget SWF when it is ready for commands
        function yowidget_onReady() {
            window.isYoWidgetReady = true;
            var yowidget = document.getElementById('yowidget');
//Display location selected in Chooser if any
            var node = this.locationChooser.selectedLocation;
            if (node) {
                var locationId = node['@id'];
                yowidget.setLocationId(locationId);
            }
        }
 
    </script>

 
<body onLoad="onLoad();">
 
    <div>
        <span id="yowidget_place" style="display:inline-block;">
        </span>

 <span id="location_chooser_place" style="display:inline-block; width:240px; vertical-align:top;">
        </span>
    </div><br/>
<div><center><b>Click the image for expanded forecast.</b></center></div>

 
        </div>
        </div>
    </div>
    <div class="underblock"></div>
</li>

Now add a new forum block. AdminCP > Forums & Moderators > Forum Blocks Manager > Add Block > Custom HTML/PHP

Title: Weather Forecast
Description: Whatever
Cache Time: You Decide
Display Order: Up to you
Content Type: HTML
Content: <div></div>
Template To Use: block_weather

Save. Purge cache.

You should be able to add this to your CMS or MEMBERINFO (profile) template by substituting the block_weather code into the relevant template.

Thank you Gemma,
I think that I will use it
but I don't find Go to AdminCP > Styles & Templates > Style Manager > Add New Template but Add New Style.

[Toorak Times]

Really confused, how do I change weather back to Celsius please?

[Toorak Times]

Originally Posted by mofeu

Thank you Gemma,
I think that I will use it
but I don't find Go to AdminCP > Styles & Templates > Style Manager > Add New Template but Add New Style.

Click on arrow drop down next where ir says Style variable Edior and you will see Add New Template