Hi, friend let me try to help you create a simple widget to display weather data. Our aim is to create a widget similar to how google displays weather data. So how it will look like?
Search for “sydney weather” in google. I got here a result like this.
And our widget will display weather similar to above one:
What all things are needed to complete this widget?
- An html file for user interface
- jQuery library for AJAX request and DOM Manipulation
- Little knowledge about how YQL works
So how we are going to approach this?
We will first create an html page. The page contains a textbox to enter place name and a “Find Weather” button. Once user click the button, weather information is fetched using YQL, AJAX and displayed in a div.
What is YQL?
The Yahoo! Query Language is an expressive SQL-like language that lets you query, filter, and join data across Web services. With YQL, apps run faster with fewer lines of code and a smaller network footprint. You can read more about YQL here.
Now lets play with the code..
First of all we need an html file. Create an html file named ‘index.html’.
Add the following lines to <body> tag:
<input id="placename" /> <input id="findweather" value="Find weather" type="button" /> <hr />
We got an area to enter our placename. The UI now look like this.
Now next we need a container to hold our weather data. For that append the following html to <body> tag.
<div id="weatherholder">
<table id="weathertext">
<tr>
<td colspan="2" id="placetitle"></td>
</tr>
<tr>
<td id="forecastimage">
<img src="" id="weatherimage" />
</td>
<td id="statustext">
<span id="temperature"></span><br/>
<span id="condition" class="contents"></span><br/>
<span id="dirspeed" class="contents"></span><br/>
<span id="humidity" class="contents"></span>
</td>
</tr>
</table>
</div>
I have put the ids for easy readablity. We need some styling for these elements. CSS will help us now. Copy the following css script inside <head> tag of our html file. It will take care of our basic styling.
<style>
#weathertext{width: 250px; border: 1px solid #cccccc; display: none;}
#placetitle{font-size: 36px; border-bottom: 1px solid #cccccc; text-transform: capitalize;}
#temperature{font-family: arial; font-size: 24px; font-weight: bold;}
.contents{font-family: arial; color: #999999; font-size: 12px; line-height: 20px;}
#statustext{text-align: left;}
#forecastimage{width: 120px;}
</style>
Now come, the core functionality part. First we will include the jquery reference using <script> tag. jQuery is a javascript file or javscript library which has ready made functions for usual tasks.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Next inside a script tag paste the following javascript code.
$(document).ready(function(){
//binding click event for button
$('#findweather').click(function(){
$.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20location%20in%20(%0A%20%20select%20id%20from%20weather.search%20where%20query%3D%22'+$('#placename').val()+'%22%0A)%20limit%201&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=?',function(data){
$('#weathertext').show();
$('#placetitle').html($('#placename').val());
$('#weatherimage').attr('src','images/'+data.query.results.channel.item.condition.code+'.png');
$('#temperature').html(data.query.results.channel.item.condition.temp+' °F');
$('#condition').html(data.query.results.channel.item.condition.text);
var winddirection=parseInt(data.query.results.channel.wind.direction);
var direction='';
//finding wind direction
switch(true)
{
case (winddirection==0):
direction='N';
break;
case (winddirection<90):
direction='NE';
break;
case (winddirection==90):
direction='E';
break;
case (winddirection<180):
direction='SE';
break;
case (winddirection==180):
direction='S';
break;
case (winddirection<270):
direction='SW';
break;
case (winddirection==270):
direction='W';
break;
case (winddirection<360):
direction='NW';
break;
case (winddirection==360):
direction='N';
break;
}
$('#dirspeed').html('Wind: '+direction+' at '+data.query.results.channel.wind.speed+' mph');
$('#humidity').html('Humidity: '+data.query.results.channel.atmosphere.humidity+'%');
});
});
});
In our js code we have mainly used following jQuery Functions:
- .click() : what functionality has to be implemented when user clicks the button with id ‘findweather’
- $.getJSON : telling jQuery to fetch the response produced by given url and pass the response to ‘data’ parameter of callback function. .getJSON can be used only for fetching JSON response from a URL.
- .show() : show the specified hidden element
- .html(value) : assign the html of given element with the value passed to .html function
- .attr(key,value): set the key of given element with given value
Also we have used parseInt() which is a javascript function which converts string to integer. This ensures data correctness while dealing with numerical calculations.
With these basic ideas in mind, look the code again. It basically takes the json data returned by getjson function and pick the needed values from data using data.key1.key2.value. If you have experience in object oriented programming, extracting data from json is similar to getting member variable values from objects.
Now you may be wondering, there is an image of sun or cloud in the screen shot. Is that image path also provided by our YQL. Not really. YQL returns a json data which contains weather condition. There are 47 types of weather conditions like cloudy, drizzle, windy etc. For each conditions there will be a number as you can see in the link provided.
| Code | Description |
|---|---|
| 0 | tornado |
| 1 | tropical storm |
| 2 | hurricane |
| 3 | severe thunderstorms |
| 4 | thunderstorms |
| 5 | mixed rain and snow |
| 6 | mixed rain and sleet |
| 7 | mixed snow and sleet |
| 8 | freezing drizzle |
| 9 | drizzle |
| 10 | freezing rain |
| 11 | showers |
| 12 | showers |
| 13 | snow flurries |
| 14 | light snow showers |
| 15 | blowing snow |
| 16 | snow |
| 17 | hail |
| 18 | sleet |
| 19 | dust |
| 20 | foggy |
| 21 | haze |
| 22 | smoky |
| 23 | blustery |
| 24 | windy |
| 25 | cold |
| 26 | cloudy |
| 27 | mostly cloudy (night) |
| 28 | mostly cloudy (day) |
| 29 | partly cloudy (night) |
| 30 | partly cloudy (day) |
| 31 | clear (night) |
| 32 | sunny |
| 33 | fair (night) |
| 34 | fair (day) |
| 35 | mixed rain and hail |
| 36 | hot |
| 37 | isolated thunderstorms |
| 38 | scattered thunderstorms |
| 39 | scattered thunderstorms |
| 40 | scattered showers |
| 41 | heavy snow |
| 42 | scattered snow showers |
| 43 | heavy snow |
| 44 | partly cloudy |
| 45 | thundershowers |
| 46 | snow showers |
| 47 | isolated thundershowers |
| 3200 | not available |
We have stored images in our images folder for each of these conditions. And the images are named with corresponding condition numbers for easy fetching. Here is a screenshot of the images folder. This will give you an idea.
So if the JSON returns weather condition 32, we will display 32.png.
In our application we used very few keys available in the rich JSON object. If we log ‘data’ returned by $.getJSON we can view the entire list of contents. Here is a sample screenshot of our sydney search in google chrome console.
Play with code and have fun.
How to run the download file?
The download file is a zip file. Extract it and double click the index.html file. You could see the output.
If you find this article useful, Please share it with your friends using the social icons. Also show your support by visiting my social pages and provide a like or follow. God bless you and may all your tasks be fruitful.
Informative article, exactly what I was looking for.
Nice n informative article Joby… I am trying out your code and also I was trying to change the units from ‘f’ to ‘c’ but I was not able to get it done.. Can I some help on this….
Really so informative article, exactly i need but there is one problem with me.. i.e . i want to change a unit of temp.. like from F to C. and also want to change a unit of wind speed. like mph to kmp…so i do not get any option to interchange the units if any one have any idea for this . please share this.
Can you do multiple days with this service? I can get it to work, but our users want to see weather for the next 3-5 days.
Thanks, nice work.
Mark
I was trying to change the units from ‘f’ to ‘c’ please help.
I resolve this problem like this :
var x = data.query.results.channel.item.condition.temp;
var rez =(x-32)/1.8;
var fir=rez.toFixed(0);
$(‘#temperature’).html(fir);
would like to create a mobile app for my 3rd year project for farmers in rural areas can you help.which web service do i use