qOrbiter Skin Development: Data

[tschak909]

Hello everyone, Now that I have some small bits of time, and an ASUS Transformer TF700T tablet, I am developing a skin that follows Android Human Interface Guidelines, for qOrbiter.

This skin is tentatively called "Data", and I am in the process of establishing the aesthetic. My goal is to make something that belongs on an Android tablet, as if it were a system installed application, and to utilize the tablet's huge display area and touch screen only interface as efficiently as possible, while trying to balance the GPU power of modern tablets to produce as smooth and pleasing of an experience as possible, without sacrificing day to day usability.

To help kickstart some of the development, I am using the Qt Components that golgoj4 has slipped into qOrbiter, but for certain things (such as the sliders, which do not look right in Android), I am fashioning new components to fit the bill.

For now, as I develop the skin, virtually all of the elements are fixed in place, and are not dynamic to resolution or orientation changes, and it will stay that way, until I develop a consistent enough UI to break out into components.

My current development tablet is specced as:

* Asus Transformer TF700T Infinity
* 10.1 inch
* 1.6ghz Tegra 3
* 1GB RAM
* 32GB storage
* 1920x1200 display resolution.

Of note is the display resolution, as I am designing the UI to this exactly. Again, as soon as I have something more consistent and more or less completed, I will have to tear the whole thing apart and make it reusable and dynamic, but doing so at this point would be a case of premature optimization.

I have one screen in progress at the moment, a Now Playing remote. Note, that there are much fewer buttons. They aren't needed. For any other buttons, the icons on the top right (which will include a standard android menu icon) will be available to select lesser used functions. For transport control, a slider is provided, as is play/pause, and skip buttons. Gesture control will be present on the currently playing cover art to also skip playlist items, as well as a visible playlist on the right side (not there yet).

A picture here:


It's only the start, but it will come together more quickly over the next few months. qOrbiter is proving itself to be a much more flexible user interface engine than Orbiter EVER was. And that's how it should be

-Thom

[polly]

looks good!
Hope to get my first screen done this week :-)

[WhateverFits]

Perfect idea Thom! It looks good so far too. With the advent of cheap Android tablets, I LOVE this! I'm going to permanently mount a tablet on the wall by my front door as a house/alarm control as soon as this qOrbiter is ready since these tablets are now cheaper than alarm keypads.

[tschak909]

Just so everyone understands, my time and schedule at present is very rocky. I am working on multiple contracts, whilst also trying to maintain something of a married life.

There is also the fact that I am doing a tremendous amount of study between existing android applications, and cross referencing against the Android HIG, to not only determine aesthetic, but expected behavior, not counting the constant usability testing required. It will take a considerable amount of time to produce something usable, at least 6 months.

-Thom

[tschak909]

An update on Data, I've been refactoring the layout, and adding some additional behavior.

Here is the result:

http://imgur.com/a/lfoQ1#0

These changes were made because of a realization, particularly that a modern tablet has a sizable black border around its display, both for aesthetic reasons, and for functional ones. Functionally, this black border provides a place to safely rest your fingers. This has a very important impact on the resulting design, something that could not safely be done with older touch devices, namely that design elements can, and should not only go to the edge of the screen, but should provide large, easy to hit areas for the most commonly used functions.

This means that, the playlist takes up most of the space on screen, when it is requested to be visible, and that while the playlist is visible, that a thumbnail should be present to remind the user visually, what is being played. and thus the button hit area for this widget is as large as the thumbnail, making it easy to hit, and to provide a visual cue of where the thumbnail will appear.

A video showing the new changes in place is here: http://www.youtube.com/watch?v=rgfNoq5Iah0

Let me know what you think.

-Thom

[polly]

good works. Gives me some inspiration for my skin.

Thanks for sharing.

cheers,
ochorocho

[tschak909]

Evening fellas, a progress update:

* Playlist, and More Info have been implemented for Now Playing screens. As part of this exercise, I had to implement Action Bars from the Android ICS HIG specification, and essentially make something in QML that acted like them.

You can see the results, here:





And a youtube vid here:
http://www.youtube.com/watch?v=GjwrfgsWMRo

The video shows all the features in the skin that work at present. There still is so much work to do, creating more widgets, and testing their applicability.

As a small example for non-pluto remotes, I whipped up an OSD direction pad, and tested it on a netflix remote screen:
http://youtu.be/w0lOfmc-9wo

Enjoy,
-Thom

[tschak909]

More widgets have been added, including a text field, with on screen keyboard support:
http://www.youtube.com/watch?v=SQiGyb6BTcI

In addition, slider dialogs have been added. Here, I am showing a slider dialog for adjusting the volume (the speaker icon):
http://www.youtube.com/watch?v=lj0IWJ4c_Ao

And the action bars have been generalized (so that more icons can be added), as well as an overflow menu:
http://imgur.com/a/Jr2ZX#0

...it continues.

-Thom

[davegravy]

Can't freaking wait for this to be released!

* davegravy wipes up drool

[tschak909]

Thanks. Development is proceeding slowly, because I am having to make all of my own widgets, from scratch.

-Thom

[davegravy]

Thanks. Development is proceeding slowly, because I am having to make all of my own widgets, from scratch.

-Thom

Well from the looks of it it's worth the wait.

[tschak909]

More work being done on the qOrbiter skin: Data.

The symbian like buttons have been replaced with stuff resembling the Android Media Player, transport bar is replaced slightly with a slider that dims when not being manipulated, giving an even cleaner look.

http://i.imgur.com/bklniFt.jpg

[ardirtbiker]

You couldnt have picked a better show to showcase.. I miss Babylon 5.

 Your work on this may cause me to go buy a small tablet!


awesome work.


Dennis

[tschak909]

[davegravy]

Shit... looks nice.

Dumb question probably, but why does the text not align sometimes (see attached)? Is this intentional?