TeaTimer and Q10

TeaTimer should run on Touch and Keyboard devices, so I just did a first implementation and here are my experiences.

Redesign Layout Homescreen for Q10

Q10 has less space available: 720×720 instead of 768×1280. It’s worth rethinking the layout. Some screens worked out-of-the-box, but the startscreen got a redesign for Q10.

first decisions:

Moving the DropDown on top over the images

Making the ActionBar as Overlay to avoid distortion of images.

You have to reserve 96 Pixel for the DropDown UI Control.

If you expand the DropDown, it doesn’t use the complete space of the screen – only 50% were used from my experiences. Setting the height to a higher value doesn’t work. My first idea to make the Images invisible if DropDown is expanded, doesn’t look good with only half screen occupied by the DrowDown.

My solution: move the Image 360 px down (TranslateY) and all is perfect. I also hide the ActionBar to only display the DropDown where the user has make his/her choice.

To avoid flickering I’m reusing the DropDown area to show the progress while brewing the tea and placed a ‘Stop’ button to cancel the process:

Here are the Screenshots how it looks now on BlackBerry Q10:

Homescreen with Tip-of-the-day:

Selecting Tea (DropDown expanded):

Animated progress of brewing:

Tea is ready:

That’s it !

Most Screens working out-of-the-box

All other screens are working without any changes. the secret to get this: use of

ScrollView

ListView

DockLayout

Here some examples:

Minimized Views (ActiveFrame / SceneCover)

As you know, the TeaTimer is running in the background and minimized Screens have three states: stopped, brewing, ready.

Thanks to the tips from Staffan Lincoln I already have changed the minimized views for Z10 using the ‘Header’ template, so minimized is also working out-of-the-box for me:

Text is readable inside Header and it’s ok only to see 50% of the Images compared with Z10.

More work ?

As soon as I’m getting the DevAlpha C I will add some more comfort for the keyboard using shortcuts. But for now I’m having an App supporting both devices.