by lhuffman on Mar 27, 2012
Today we released an update to our Javascript SDK that fixes a few minor bugs, adds new data collections to reflect the new API endpoints released in version 1.1, and a new Daily Records widget. For the complete list of changes view the version history.
New Data Collections
The new data collections are:
-
Earthquakes - Provide access to worldwide earthquakes
-
Fires - Access to US fires
-
Records - Access to US daily records.
-
Sunmoon - Access to worldwide sun and moon information.
-
MoonPhases - Access to moon phase calendar information.
These correspond to the equivalent Aeris API endpoints of the same name. Review the Collections documentation for more information.
Daily Records Pre-built Widget
A new daily records widget has been added to our pre-built widget library and provides an easy way to display nearby daily records for an area. The record types include precipitation, snowfall, high temperatures, low temperatures and more.
Here is an example on how to add the new widget to your site, which is based on the “Getting Started” example from the Aeris JavaScript SDK documentation:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Sample Aeris Widget</title>
<style type="text/css">
#widget-records{width:380px;height:460px;}
</style>
<link rel="stylesheet" type="text/css" media="all" href="http://js.aerisapi.com/css/widget.css" />
<script type="text/javascript">
window.Aeris = window.Aeris || {
onLoad: function() {
// Initialize the SDK with your options
Aeris.init({
client_id: 'CLIENT_ID',
client_secret: 'CLIENT_SECRET',
widgets: true
});
},
onReady: function() {
// show the Records widget in the "widget-records" div
var currentsTop = new Aeris.widgets.Records($('#widget-records'), {
params: {
p: '55415',
from: '-7 days',
to: 'now',
sort: 'detail:-1'
}
});
}
};
// Load the SDK asynchronously
(function(w, d) {
var loader = function() {
Aeris.secure = (d.location.protocol === 'https:');
var b = '//' + ((Aeris.secure === true) ? 'js-secure' : 'js') + '.aerisapi.com/';
var v = Aeris.version;
var script = d.createElement('script'), tag = d.getElementsByTagName('script')[0];
script.type = 'text/javascript';
script.async = true;
script.src = b + ((v && v !== '') ? v + '/' : '') + 'aeris.js';
tag.parentNode.insertBefore(script, tag);
}
w.addEventListener ? w.addEventListener('load', loader, false) : w.attachEvent('onload', loader);
})(window, document);
</script>
</head>
<body>
<div id="widget-records"></div>
</body>
</html>
...
Read more...
by nshipes on Mar 08, 2012
We released the initial version of our Aeris JavaScript SDK, which is the first toolkit publicly available as part of our Aeris Web product line. Last month we previewed the SDK and highlighted many of the major features included with it. Also be sure to check out our documentation and pre-built widgets for the SDK from our Developer Center.
The following is a run-down of the primary features currently included with the initial version of the Aeris Weather JavaScript SDK.
Widgets
One of the best features of the Aeris JavaScript SDK is its support for quickly creating weather widgets. As we previewed last month, the SDK already comes with a library of pre-built widgets for you to instantly includes on your web site or within your web applications. These widgets are extremely flexible, allowing you to customize the styles simply by overriding the default CSS styles, or allowing you to define a new HTML template altogether. In our preview post and current documentation, we describe how our widgets have utilized Handlebars JS as its templating engine to offer a very fast and flexible platform for widget generation.
Customizing the Pre-Built Widgets
On our own HAMweather site we have included some of these pre-built widgets from the SDK, such as the current conditions widget (Aeris.widgets.CurrentsCompact) in our site’s main navigation bar and the nearby weather conditions (Aeris.widgets.NearbyWeather) displayed on our home page. The first thing you’ll notice is these don’t look the same as the default pre-built widgets. We’ve simply modified the default CSS styles for our own implementation, and for the current conditions in the navigation, we’ve provided a completely new HTML template.
To demonstrate how easy it is to customize these widgets with a different template, below is an example of how we are setting up the widget in our site’s navigation bar:
var currentsTop = new Aeris.widgets.CurrentsCompact($('#header ul.top-elements > li.wx'), {
cls: 'hw-widget',
tpl: '<div class="aeris-widget-currents-compact-icon">' +
'<a href="{{links.wxlocal}}?pands={{lower places.0.place.name}},{{#if places.0.place.state}}' +
'{{lower places.0.place.state}}{{else}}{{lower places.0.place.country}}{{/if}}">' +
'<img src="{{paths.wxicons}}{{observations.0.ob.icon}}" />' +
'</a></div>' +
'<div class="aeris-widget-currents-compact-temp">' +
'<a href="{{links.wxlocal}}?pands={{lower places.0.place.name}},{{#if places.0.place.state}}{{lower places.0.place.state}}' +
'{{else}}{{lower places.0.place.country}}{{/if}}">{{observations.0.ob.tempF}}°<span class="aeris-widget-unit">F</span></a>' +
'</div>' +
'{{#advisories}}<div class="aeris-widget-currents-compact-alert"></div>{{/advisories}}',
opts: {
resize: {
auto: false
}
}
});
In our example, we needed to differentiate this widget instance from all other instances that may appear, such as on our sample widgets page, in order to properly target it with our custom CSS styles. Therefore, we set our widget’s cls property to “hw-widget” and then each style we needed to override for this instance is prefixed by .hw-widget:
.hw-widget .aeris-widget-currents-compact-loader {background-color:transparent;background-image:url("http://js.aerisapi.com/css/assets/loader_ffffff_4f4f4f.gif");border:0;}
.hw-widget .aeris-widget-currents-compact-icon {margin-top:5px;margin-right:5px;}
.hw-widget .aeris-widget-currents-compact-icon img {width:30px;height:30px;}
.hw-widget .aeris-widget-currents-compact-icon a img {border:0;}
.hw-widget .aeris-widget-currents-compact-temp {font-size:18px;color:#fff;margin-top:10px;}
.hw-widget .aeris-widget-currents-compact a {color:#ddd;border:0;}
.hw-widget .aeris-widget-currents-compact a:hover {color:#fff;text-decoration:underline;}
We also needed to define a new template as there were certain elements we didn’t need from the default widget template. So we included a new HTML template in the widget’s tpl property, which also contains the variables pertaining to the actual API data we wanted to display. For instance, to display the current temperature in degrees Fahrenheit, the API returns:
{
"success": true,
"error": null,
"response": {
"id": "KMSP",
"loc": {
"long": -93.233333333333,
"lat": 44.883333333333
},
"place": {
"name": "minneapolis",
"state": "mn",
"country": "us"
},
"profile": {
"tz": "America/Chicago"
},
"obTimestamp": 1331217480,
"obDateTime": "2012-03-08T08:38:00-06:00",
"ob": {
"timestamp": 1331217480,
"dateTimeISO": "2012-03-08T08:38:00-06:00",
"tempC": -4,
"tempF": 25,
"dewpointC": -6,
"dewpointF": 21,
...
}
}
To display this in our HTML template, we would use the variable format expected for Handlebars JS and explained in the SDK documentation:
{{observations.0.ob.tempF}}
Since our widget is using a BatchCollection to load the data, the response data returned from the API is stored in the collection as an array for the endpoint used. Thus, we would need to access it by prefixing our variable key with the endpoint we want data for, observations, and the item number which we want to access, observations.0. The item number will typically be “0” unless you are using a BatchCollection to
load the same data for multiple locations, such as current observations for five locations. Then you would access each according to their zero-based array index:
{{observations.0....}}
{{observations.1...}}
{{observations.2...}}
You will also noticed we have used a block expression for #advisories and an #if block helper in our template, which are all features supported by Handlebars JS. Be sure to review the complete documentation for Handlebars JS to take advantage of its flexibility in your own Aeris JavaScript templates.
We will soon be adding a tutorials section to our Aeris JavaScript SDK documentation for additional examples of creating your own custom widgets using the SDK.
Collections & Models
The JavaScript SDK makes it extremely easy to use your Aeris API subscription within your own custom web applications and sites even without using the widgets. We’ve included a set of collection objects that perform all of the necessary data requests and parsing from the API in order to provide you with an easy method for accessing this weather data. Each API endpoint has its own collection within the SDK, so you don’t have to worry about API URLs, paths or query strings. Simply create your collection instance and tell it what type of data you want to fetch, including any of the supported API options for each endpoint.
To make accessing the returned API data even easier, we’ve assigned model objects for each collection as well. This type of abstraction allows for more efficient usage and better backwards compatibility, so if anything ever changes with the core Aeris API, our JavaScript SDK can automatically account for such changes internally. This greatly reduces the potential of your own application having errors due to such changes.
...
Read more...
by nshipes on Feb 08, 2012
Over the past few weeks, we’ve been actively working on the first component to Aeris Web -- the JavaScript SDK. We are continuing to test and wrap up all items required for our version 1.0 slated for release within a couple of weeks, but we wanted to provide a preview of how easy it will be to incorporate your Aeris API subscription into your custom web applications.
For instance, if you wanted to fetch the latest weather observations for Seattle, WA, you would just need to use the following snippet once you have initialized the Aeris JS SDK with your access information:
var obs = new Aeris.collections.Observations();
obs.bind('load', function(collection){
var model = collection.at(0);
alert('Currently in Seattle it is ' + model.get('ob.tempF') + ' degrees.');
});
obs.fetch('seattle,wa');
The same properties from the core data API are also used in the JavaScript SDK, so switching between the two formats is straightforward.
Built-In Widgets
We will also be including a set of basic built-in JavaScript widgets that you can include in your application that are fully customizable using CSS and custom templates. The following is an example of using our built-in Advisories widget that loads advisories for Birmingham, AL and renders it to a <div> whose id is “widget-advisories”:
var advisories = new Aeris.widgets.Advisories($('#widget-advisories'), {
params: {
p: 'birmingham,al'
}
});
All of our HTML templates are based on Handlebars JS, so it is very easy and quick to customize any of the built-in widgets or creating your own by extending our core objects.
Below are screenshots of some of the built-in widgets that will come with the Aeris JavaScript SDK.
Our included widgets also support additional features, like displaying data based on the user's geolocation or allowing them to view the data for a particular location they can search for. Additionally, widgets can be configured to auto-refresh its data based on a specific time interval, so you can ensure your data is always up to date no matter how long the page is open or application running.
We will be posting additional updates as we get closer to the official release of version 1.0 of the JavaScript SDK.
...
Read more...