Initial User Interface Work for the PlayBook

This weekend I made pretty good progress on the UI for the PlayBook app which will be mounted in the dash of the BatBerry.  I took a lot of inspiration from the work done by a member on Chicks Love The Car.  These were some great mock-ups based on the images used in the new movies for the computer screens in the Tumbler.

I created the UI all in HTML5 to fit the BlackBerry PlayBook screen using CSS and the bbUI.js web toolkit for screen and JavaScript management.  Then I packaged it all up as a BlackBerry WebWorks application.  I’ve also posted all of the source code up in github for anyone who wants to check it out.

The idea for the PlayBook application is more of a computerized system that will watch the different statuses of the car.  I’m not quite sure how I’m going to acquire all of the data to be fed into the PlayBook yet for display, but I’ll maybe talk to the folks at QNX Auto to see if they can give me a few leads.  Since once I’m in the car I’ll have all sorts of manual switches that will control the systems, the PlayBook app will react to the on/off states of the switches as well as data from the car.

Acquiring the wireframe images of the car have been the most painstaking part of the UI.  These were taken from the hi-res images of the blueprints (which I also have an original copy from back in 1999 hanging on my office wall), and then inverting the colors and cropping out all of the areas around the lines so that the car is transparent to see the background behind it.  I used Gimp’s selection tool to basically outline the sections and replace them with transparency.

Once all the colored areas were replaced with transparency, I changed the black outlines to a shade of gray to fit with the color scheme of the app.  I’ll be able to color the different sections of the car to highlight different statuses.

The remote control software for the car is in the middle of being transferred over from my BlackBerry 7 phone to my BlackBerry 10 phone. It’s all written in HTML5, JavaScript and I’ll be using bbUI to create the user interface on the phone.  This app will eventually connect with my Arduino board via Bluetooth to turn on/off the different systems when I’m outside the car.  The source code for this app can also be found in the BatBerry github code repository.

I’ll post more updates on both of the apps as I make some more progress.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s