Author
Topic: qOrbiter Skin Development: Data (Read 3671 times)

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.

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

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.

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.

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.

* 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.

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.