Over the past couple of weeks we've been involved in developing a Real-Time Cricket widget. It's been a collaboration, with Opta Sports providing the data, Kwwika powering the real-time client push as well as doing a bit of dev on data architecture and feed parsing and Matador Digital helping us build the widget itself.
There's quite a bit of work gone into this widget in a short space of time and I'm really pleased with the result. I'll go into exactly how it was built in more detail in a later post but for now i'll focus on what the widget can do and be used in this post.
Features
Opta Sports have created a an
overview page for the widget which details the features at a higher level but I'm going to drill down a little bit deeper into the tech and explain how easily the widget can be embedded on any website.
Real-time ball-by-ball updates
For each event that occurs within a cricket match Opta Sports generate a feed. We get this feed, parse it and push it through Kwwika and into the web page. This means that every event is displayed on the widget.
Show either full scoreboard or simple match status
Ok, we finally get to see how you embed the widget in your page. It's simple!
opta.cricket.widget("#scorecard-wrapper",
{
style:"scorecard",
gameDirectory:"/OPTA/CRICKET/FIXTURES/AUSTRALIA_V_ENGLAND_ASHES_2010-11/20101216/3RD_TEST"
}
);
The first parameter you pass to the
opta.cricket.widget function is a
jQuery selector. This tells the widget where it should be created. If the selector matches multiple elements then you'll get multiple widgets. You probably wouldn't want this but it's a cool trick. The widget will replace the contents of the selected element(s) so until the widget loads you can have some HTML that says the widget is loading or just some static cricket data. If the widget can't load for any reason then the contents of the element(s) won't be replaced. This won't happen though ;)
The second parameter is options for the widget. We have a number of options that we support but the example above shows:
- style: The widget can be created in a number of forms and this option parameter indicates how the widget should be displayed:
- scorecard: This style is the full scorecard for an innings. This displays an overview section and all batsman and bowler information.
- mini: This style is very similar to the scorecard. It displays the overview section and just the batsman and bowlers that are active.
- overview: This style shows just the overview section of the widget.
- livescores: This style just shows the current score in a smaller widget area.
- gameDirectory: This identifies the Kwwika topic to request for the game and the data for this game will be displayed in the widget. The following topic is used for the 3rd test of the Australia v England Ashes 2010 to 2011 series: /OPTA/CRICKET/FIXTURES/AUSTRALIA_V_ENGLAND_ASHES_2010-11/20101216/3RD_TEST
We also have a few other option parameters:
- innings: The widget defaults to displaying the latest available information. However, we cache some of the cricket data so it's possible to display the data for an earlier innings from a match by passing in an innings number.
- flashTime: When an update occurs such as a run being scored or a bowler bowling a batsman out we flash the widget. This allows you to set how long the flash will last for.
- title: This is displayed at the top of the widget if it is in the livescores style.
- topicErrorMsg: A bit techie. If you have entered a gameDirectory that doesn't exist then the widget displays an error message. This allows you to configure what that error message says. It can contain HTML.
Developed using Kwwika technology for instant data streaming
Yep, it's the real-time web. Delivered ;) Do you have any data that you want to instantly distribute to any web-enabled device? If so,
get in touch.
Easy to customise - apply your own styling and branding
Since the widget is purely HTML and we've styled it with CSS you can easily customise the widget.
Aaron Basset of Matador Digital did a great job when I asked him to supply a few different stylesheets. He told me that he'd used
LESS to generate the CSS for the widget so it was easy to create different styles. Within 15 minutes Aaron had sent 10 different styles my way. You can apply the different styles in our example pages by just changing the drop-down at the top-left of the page. My favourites are the Kill Bill or Comic styles.
Can be embedded anywhere within the website with just three lines of code
We've classed the HTML container element for the widget and the single widget script include as lines of code which bumps this up to 3 lines. I've used a number of widgets in the past and I think we've done a great job here.
<div id="scorecard"></div>
<script src="http://cdn.kwwika.com/widgets/opta/cricket/opta.cricket.js"></script>
<script>opta.cricket.widget("#scorecard-wrapper",style:"mini",gameDirectory:"/OPTA/CRICKET/FIXTURES/AUSTRALIA_V_ENGLAND_ASHES_2010-11/20101216/3RD_TEST"});</script>
Okay, that last line is a bit long and maybe counts as 4!
Multiple matches on a single web page
You can call opta.cricket.widget as many times as you like and for each call you could pass a different game directory. That way you could easily have multiple games displayed on the same web page if you liked. You could also mix the styles of widgets that are on a web page.
I want that widget!
Opta Sports specialise in high quality sports data. They have a number of sports products and this real-time cricket widget is the latest such product. Opta Sports are looking for companies who are interested in taking this widget and embedding it on their website or within their web application. If you are interested please get in touch with us or or directly with Opta Sports via their cricket score centre page.
Since the ashes are nearly at an end we will also consider allowing you to embed this widget free of charge on your website for the remaining Ashes matches. Just
get in touch.
I want the cricket data!
One of the things that excites us about this widget is that we are now seeing high quality sports data streaming through our servers. We've also proven that Kwwika is a fantastic distribution channel for real-time data. And we've seen that the delivery speeds between the data being captured and appearing on a web page are fantastic! We hope that this is the start of a big DAAS (Data as a Service) trend and that Kwwika can be at the forefront of it.
If you like the widgets but you'd love to just get hold of the raw data and build your own widget, web app, mobile app or desktop app then
please get in touch too.
Examples
The above examples are hard-coded to show the Ashes 2nd Test but here are the Scorecard widget links to allow you to view the data from the 3rd and 4th tests:
From the format of the above links I'm sure you'll be able to work out how to view the other examples with different games :)
Additional: You can also see the South Africa v India test using this topic:
/OPTA/CRICKET/FIXTURES/SOUTH_AFRICA_V_INDIA_TEST_SERIES_2010-11/20101216/1ST_TEST
Thanks
Last but certainly not least, a bit thanks to everybody we worked with on this.
Opta Sports
A big thanks to
Opta Sports for working on this product with us and giving us a chance to show off our technology. Working with
Alon in particular has been a pleasure.
Matador Digital
We'd also like to thank
Matador Digital for the UI work and doing the majority of the widget functionality (I couldn't help "lending a hand" though). Dave did a great job helping us come up with the UI and Aaron never ceases to amaze me with little pieces of information that make daunting tasks seem so simple. Really appreciate your hard work guys!
Comments [0]