Widget Examples‎ > ‎

Weather Widget


Location aware Weather Widget implemented with Bondi GPS features and "World Weather Online"  service.

Obtaining API key from World Weather Online

World Weather Online provides global weather forecast and weather content for websites, use the following URL to signup and Generate API key


User generated key and then generate Feed URL using the following link. select JSON as the format.





http://www.worldweatheronline.com/feed/weather.ashx?q=0.00,0.00&format=json&num_of_days=2&key=Objained_Key

Create a new project

Choose File >>New>>Project under eclipse menu.
Then from the New Project Dialog, Select Droidget Wizard>>Project
Fill necessary fields including project name..etc.. 

In order to have the GPS functionalities in widget application, in the Feature section , 
Click on Add and select geolocation feature "http://bondi.omtp.org/api/gelocation".  

Also it is required to set the access permission for following URLs to access google maps from widget. 
For this, Click on Add in the Access section in project creation wizard and add the URLs.
http://worldweatheronline.com/

and Click Finish
Project with the given name will appear in the Eclipse project explorer.






Next, we will set the Access. Please click [Add] button on the right side of Access.






config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget id="WeatherSample_1279509637280" version="1.0" width="400" height="200">
    <content src="index.html" type="text/html"/>
    <name>WeatherSample</name>
    <description>The sample of Weather</description>
    <author url="http://www.gclue.jp">GClue</author>
    <icon src="icon.png"/>
    <license></license>
    <feature name="http://bondi.omtp.org/api/geolocation" />
    <access uri="http://worldweatheronline.com" subdomains="true" />
</widget>

Create a JavaScript File

create a new folder called js and under that folder create a new file and name it as "script.js".
Then add the following functions.

js/script.js
// call init
function init()
  bondi.geolocation.getCurrentPosition(onPositionSuccessonPositionError{timeout:40000});
}

// this function will handle each position updates
function onPositionSuccess(position{
  lat position.coords.latitude;
  lon position.coords.longitude;
  var url "http://www.worldweatheronline.com/feed/weather.ashx?q="+lat+","+lon+"&format=json&num_of_days=5&key=YourKey";

  json(resultJsonurl);
}

// this function will handle each error in position updates
function onPositionError(error{
  document.getElementById("divMsg").innerHTML "Error";
}

 
// callback of JSON
function resultJson(json){
  
  var resultHtml "<table>";
  var resultDayHtml "";
  var resultIconHtml "";
  var resultHighHtml "";
  var resultMinHtml "";
  
   for(var 0json.data.weather.lengthi++){
     alert("day="+json.data.weather[i].date);
     resultDayHtml   += "<td><font color=white>" json.data.weather[i].date "</td>";
     resultIconHtml   += "<td><img src=" json.data.weather[i].weatherIconUrl[0].value " height=70></td>";
     resultHighHtml   += "<td><font color=red><center>" json.data.weather[i].tempMaxC "</center></font></td>";
     resultMinHtml   += "<td><font color=blue><center>" json.data.weather[i].tempMinC "</center></font></td>";
   }
   resultHtml += "<tr>" resultDayHtml "</tr>";
   resultHtml += "<tr>" resultIconHtml "</tr>";
   resultHtml += "<tr>" resultHighHtml "</tr>";
   resultHtml += "<tr>" resultMinHtml "</tr></table>";
   
   document.getElementById("divMsg").innerHTML resultHtml;
}
 
// JSON
function json(callbackurl){
     
  var http_connect new XMLHttpRequest();
  http_connect.open("GET"urltrue);

  http_connect.onreadystatechange function({
    
    if (http_connect.readyState == 4{
      if(http_connect.status == 200){    
        callback(eval("("+http_connect.responseText+")"));
      }else{
        alert("Can't connect");
      }
    }
  }
  http_connect.send();
}


Edit index.html


index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <title></title>
  <script type="text/javascript" src="js/script.js"></script>
</head>
<body onload="init()">
  <div id="divMsg"></div>
</body>
</html>

Deploy the Widget

Now save and deploy the project
  • From the eclipse menu select Droidget --> packaging
  • Then Droidget-->install packaging
Or 
  • upload the Widget to web server and update the download.html file as follows. Then access the download.html from the smart phone and install the widget from URI.

Download.html
<html>
<head>
    <title>Download</title>
</head>
<body>
    <href="droidget://www.example.com/WeatherSample.wgt">WeatherSample</a><br>
</body>
</html>

Preview

Comments