Macadamian Blog

Taking the Stage at BlackBerry World 10

Last week, Daniel Baxter, one of our Senior Developers, and I were on stage at BlackBerry 10 Jam talking about custom frameworks we've been building that work with OpenGL and Cascades. If you haven’t seen the video of demo at BlackBerry Jam, check it out. We were given the opportunity to show off one of our apps that makes use of custom controls that pull in content from various resources to aggregate the information and present it in an attractive and useful UI.

Background

This all began when we got a sneak peak at BlackBerry 10 a while back, saw some of the concepts like flow and connect, and realized what was possible using Cascades with a minimal amount of code. We got excited and decided to create a demo that embodied those concepts in an Enterprise context. We wanted people to rethink how they might go about building a really rich enterprise app in BB10.

The App

Imagine you are the owner of a sports apparel company and its NBA play-off time. Like any business, your biggest problem is predictability. As the owner you want to see data analytics and visualizations that will help you make inventory purchasing decisions, such as how many team jerseys to buy. Of course you can’t predict what is going to happen in the playoffs, so you want to see data showing you things like who’s playing well so you can make a more informed purchasing decision.

This app is a combination of Cascades and OpenGL. On the left hand side of this screen shot is a giant Cascades control. It allows you to rotate around through the different NBA teams.

For the data source, we captured ½ million tweets over 2 weeks from Twitter for the different NBA play-off teams, in an attempt to get a sense for which team was generating the most interest among fans.

We then rendered the data in OpenGL as a screen graph, which shows which team has the most buzz. As you tab through the app, you can see the starting line- ups of the Mavericks and Thunder as well as who has the most play-time in minutes per game.

As you tab through the app, you can see the starting line- ups of the Mavericks and Thunder as well as who has the most play-time in minutes per game.

In this screen shot, you can see that the app also shows which players have the most rebounds per game.

Both of these charts are drawn in Open GL but all of the rest is done in Cascades. The text and buttons are in Cascades, and OpenGL is dropped in on top. Basically, we’ve seamlessly rendered OpenGL in between all the rest of the controls.

The Code

There are 3 parts to the code for the controls we created: an OpenGL thread, 3 different GL renderers (each responsible for drawing one of the graphs), and a custom control that implements straight from the Cascades CustomControl class. Once we had these three parts, we attached the OpenGL thread to the CustomControl using an invisible ForeignWindow and gave our OpenGL thread a reference to the correct renderer.

To use the control, we import the control by name and then just drop it in a QML document like any other Cascades control. The rest of the app is written in straight Cascades. The scene graph is built up by the Cascades engine and the control will integrate seamlessly into your app. It’s as easy as that.

If you’d like a better look at the code, we’ve put it up in open source under Cascades samples.