martedì 4 febbraio 2014

Hawaii responsive user interface

This was written after FOSDEM but never had the time to finish it and do the video so with too many months of delay I've got some time in my hands to post about the Hawaii desktop environment responsive user interface.

Hawaii is currently focused on desktops and laptops but it's always been a goal to get ready for other devices as well supporting screens with different DPIs.

Why bother, can't we just do the same user interface and let the controls scale according to DPIs and expand contents to fit the screen size? No, we can't because there are differences between devices.

Desktops and laptops have a keyboard and most of the time a mouse and to complicate things even further they can also have a touchpad, for example I own an Apple Magic Trackpad.  Mobile devices, on the other hand, have touch input, no keyboard and higher DPIs.

The same user interface cannot be used for different devices, the user expects it to suit the device.

On a tablet the user expects to see an application at a time and use several gestures, there is also less screen space so you have to design interfaces with fewer things on screen.
The opposite is true on desktop where you can show multiple windows and some tiling feature is more than welcome and since the mouse is more precise you can put more controls on the screen.

Today there are some devices like the Yoga that can alternatively be turned into either a tablet or a laptop. The only problem is that it's not cheap, I will have to save money before buying one :)

That's why I prefer calling this responsive user interface rather than convergence.

Hawaii should react on events such as screen resolution change, mouse plugged in or touch input device plugged in and load the user interface that is willing to step in and show a user interface for the current setup.

To make development easier the switch happens reading settings with the QtConfiguration library that supports changes notifications. That's enough to simulate an event. In the future I plan to use Solid to determine what's the current setup like, but maybe QScreen and QTouchDevice will be sufficient.

Most things that a desktop environment need can be shared between shells, for example lock screen management, idle state management, notifications, power management and sounds are all features that need to be done once.

With Green Island, the QML compositor, one can also plug in different ways to manage windows and panels all with their Wayland protocol interface.

This is not all. Applications need to switch the user interface too, so I've been experimenting with QFileSelector and QQmlUrlInterceptor.

In the application demo I have used QQmlUrlInterceptor.
The application has a content directory with the QML code for the desktop with the following subdirectories that override files for specific profiles: +phone, +tablet, +touch

The +touch subdirectory contains code for all touch user interface, one example is the list view delegate, +phone and +tablet override the main view (the tablet version has a menu that can be pulled from the left with a gesture while the phone version has it always visible).

For demo purpose, the user has to pass all the relevant profiles to the application so for example if I want the tablet version both touch and tablet are passed as arguments.

Here's a little video showing the switch from a tablet UI to a desktop UI and different layouts for the same application.


As you can see the tablet user interface has two panels (launcher at the bottom edge and a smaller panel with indicators on top), it also have a desktop view with a search bar and application icons. Stacked below there's the background view.  The desktop user interface is the classic Hawaii shell that has a bottom panel with more elements.
Posta un commento