Hildon UI elements in QML

I've been playing with PySide and QML this week (more on that soon), but here's something that might be interesting to the Maemo community: Using the native Hildon look and feel of Maemo 5 in QML.

This QML demo uses the current theme graphics of Hildon and provides QML components that can be used just like their Hildon counterparts, but inside QML UIs. This is not a complete library, just a test of what could be possible in case anyone wants to step up and create and maintain a Hildon library of QML components. Here's a video:

The code for this demo is on Gitorious - you can try it out on your N900 using qmlviewer.

Maemo 5 app UIs: {The,A} big picture

Sooner or later it will be necessary to create a QML UI for gPodder if it is to integrate nicely with devices on which Qt is the "native" toolkit for third party apps. At the moment, the reusable UI elements that can be used with QML (Qt Components) have not yet been officially released (the Git repository is available on Gitorious, though), and there are no UI style guidelines for Harmattan out (yet?). I'm also not able to locate UI style guidelines for QML apps on Symbian^3, and there are only a few small sample QML apps out right now.

Let's look at what we have on Maemo 5 right now. Here's a simplified overview of the current Maemo 5 UI of gPodder:

You can also check out the full-size image (~ 3.5 MB).

The UI follows the Maemo 5 Style Guide where it makes sense and tries to come up with better solutions where the Style Guide does not have a definitive answer. I'd like to hear your opinion about the current UX of gPodder and how these concepts can be translated into a QML app that integrates nicely with "future" UIs (Harmattan, S^3). The new-style episode list that can be seen in this picture will be made available with the next release that will be out Really Soon Now™.

MaePadWeb - A Web UI for MaePad running on your N900

One of the annoyances with task lists on mobile devices is that there is no easy way to view or edit your task list on your computer as well (there are some web services that allow for these things, but you have to trust your data to these services, and not all these services have a full-featured Maemo client app, and they mostly need to synchronize data between different clients).

So, what about having a simple HTTP server that you can start on your N900 and access from your computer's web browser to view and edit your MaePad checklists? Here's a short video of how it works at the moment:

Here's a screenshot of how the checklist view looks right now:

The MaePadWeb application will be available soon. On a related note, MaePad 1.8 is out now with live search support for the memo list - check it out and test it/vote for it!

gPodder 2.9 for Maemo 5 in Testing

A new release of gPodder is out. Test it and vote! It has got some fine-tuning of the UI for Maemo 5 users that you will discover one by one. I just want to highlight two UI changes that should enhance the user experience, and compare them to what the previous version had.

The episode list

gPodder 2.8 introduced MAFW integration, and with it came the ability to save position and duration information for each episode. This was displayed in the episode action dialog, but not in the episode list. We now display the position and duration in the episode list, which allows you to quickly scan for an episode depending on its duration (or check how far you have come for a given episode). In the "All Episodes" list, we also display the podcast name for each episode so that it is clearer from which podcast an episode is coming (the content of the episode "Mini Book Reviews" is much more predictable if you know that it comes from "Python411").

Updating feeds

Previous versions of gPodder changed the "Check for updates" button into a combined progress indicator and cancel button. It was not really obvious to first-time users that you can cancel the feed update, and if you accidentally tapped the button twice, the feed update would be cancelled and you might be confused. gPodder 2.9 introduces a fancy new progress bar that appears (and even slides in and out thanks to hildon.AnimationActor) during the update and has a more obvious red cancel button. With the gained screen space (the progress bar is much bigger), we can also show more information about the update process, like the name of the updated podcast.

A detailed changelog can be found at http://gpodder.org/changelog/2.9. Of course, the Maemo 4 (N800, N810) package has also been updated, and is available from Diablo Extras right now.

It's about time...

...displayed inside gPodder. Not only the total time of a podcast episode, but (thanks to the MAFW integration that has been added in 2.8) also the position that you stopped listening to, so you know how much time is remaining. There are several possibilities how to display the progress: A circle sector image, a "position/total" text display and a "remaining" text display. Right now, I opted for the "position/total" display (with "total" in cases where you haven't started listening to an episode). Here's how it looks in the current development version of gPodder:

If I remember correctly, the idea for this came up during the Barcelona Long Weekend and was suggested by Tuomas while we were discussing gPodder's UX. Back then gPodder did not store any kind of time-based length information in its database - only the file size in bytes, which isn't that helpful for listening purposes. But since then the work on gpodder.net and the desire to synchronize episode status information between different devices has put everything in place that's needed to detect the duration of episodes (it's even provided as <itunes:duration> (spec) in some RSS feeds) and with the MAFW integration to detect the current playback position when playback is stopped.

If you are using gPodder 2.8 and the built-in Media Player, gPodder already collects this information, so when the next release comes out, you will immediately have some useful data there. This should also help you in deciding which episode to pick on your commute.

What do you think of this feature? Is the current representation the best one, or would something else be more useful to you?

Playing around with MeeGo Touch

While the MeeGo Touch Python Bindings are still not packaged and released, I though I'd give the C++ library a try and have a look through the class hierarchy. After getting the basic "Hello World" app running, I decided to create an application that can load the list of subscriptions from gPodder's SQLite database:

This view uses MContentItem, which already provides an icon and two lines of text - correctly styled and ready to go. Menu and toolbar items are MAction objects that can either appear everywhere or only at specific places (e.g. only in the toolbar). The great thing is that this all works on your Desktop in a normal window, so testing applications on your computer will be much easier with MeeGo Touch than it is with Hildon (which does not really run without its own hildon-desktop session in Xephyr).

The screenshot above is from the prototype written in C++, and shows how a gPodder MeeGo UI could look like. The MeeGo Touch UI of gPodder will be implemented in Python once the bindings are ready - the framework seems to be fun to work with so far. If you would like to play around with it yourself: MeeGo Touch is available from the MeeGo PPA of Ville M. Vainio if you are on Ubuntu and don't want to build it yourself.

Desktop notification support in gPodder

Three days ago, Maemo bug 11130 was filed: It complains about gPodder stealing focus when it has finished checking for new episodes in the background. This is true, and I've been bitten by this annoyance several times already, so I decided to finally have a look into the SMS/IM/Phone-style notifications (the "yellow" bubble that merges into your task switcher after some time). Thankfully, Daniel Would (of Witter fame) has published his research results some months ago already, so getting up and running was easy from that point. Here are the results so far:

One problem that I still have not figured out how to fix (even after digging in the hildon-home source tree) is how to attach such a notification to the a given window (or application) instead of having it appear as separate "window" in the task switcher (see the second screenshot). Can somebody in the know give me a hint? On the other hand, the callback for clicking on the notification works fine already and opens the new episodes dialog.

A related change that also prevents gPodder from stealing focus was to replace the progress indicator dialog with a HildonBanner - it might not look so good without a progress bar, but it makes gPodder less intrusive when the user interacts with other applications.

gPodder 2.6 for Maemo 5: A visual tour

gPodder 2.6 (an app for Maemo that can subscribe to and download podcasts, YouTube videos and tracks from Soundcloud) has been released today. The package is in Extras-Testing, so please test it and vote for it! A package for Diablo (Maemo 4, N8x0) is also available already, and includes some Diablo-specific fixes (the "New episodes available" selection was broken, but works correctly now).

I've prepared some screenshots to compare the UI of gPodder 2.5 for Fremantle with the UI of gPodder 2.6. Here are a few examples:

The episode actions dialog now has a dedicated "Delete" button for downloaded episodes

The settings dialog has proper "Save" semantics now (close the dialog to discard changes, click on "Save" to apply changes) - this has been suggested during UX-Week 1

The progress bar for the episode list has rounded corners (useless, but looks better)

Another feature that isn't visible at first: If you get "New episodes available", and you can't decide from the title of an episode if it's worth downloading, just long-tap the episode and choose "Shownotes" from the context menu to display the complete shownotes in a window.

This release includes improved gpodder.net support (easier configuration, restoring of subscriptions now works on first run), and will feature more fine-grained episode playback status synchronization with the (yet-to-be-released) new version of Panucci.

gPodder 2.5 "easter egg": Diablo UI on Fremantle

As you probably already know, all gPodder versions (Linux Desktop, Maemo 4 and Maemo 5) use the same codebase, and as Python is an interpreted language, the choice of which UI to run can be made at run time (you could do this for compiled languages, too, but it's easier for interpreted ones). In current versions of gPodder, this happens by using command-line arguments. gpodder alone will start the Desktop version (which does not work on Maemo for obvious reasons - an "auto-detect" feature might be implemented in the future). On Maemo 5, you will usually want to use gpodder --fremantle, which will start the Maemo 5 UI as you know it (that's also the command that gets executed when gPodder is started from its application icon). On Maemo 4, the command is gpodder --maemo.

If you are a gPodder/Maemo old-timer, you might still remember the "good old days" of two-panel, stylus-based podcast goodness with multiple selections, the funky context menu and the thick toolbar on your N8x0. Ever wondered how that would feel on the N900? Try it out! Simply run gpodder --maemo in X Terminal and give your podcasts a little retro interaction (the database and downloads are the same in both versions and are therefore shared).

Try it out - it might come in handy if you are a stylus cowboy or have really small fingers (or a big N900 and normal-sized fingers...). Also, give the multiple-selection feature in the episode list a try. All you need is gPodder version 2.5, as it contains some compatibility fixes to make the Diablo version not be totally unusable on Fremantle.

gPodder "after 2.1" Maemo 5 UI Changes (#maebar)

Quick note about the stable version: Thanks to the hard-working testers, gPodder 2.1 has received its necessary karma points in Extras-Testing before the quarantime time is up, so we are just waiting for some more days to pass before gPodder 2.1 will finally enter the Extras repository.

In the mean time, there have been some important developments in the Git repository, mostly based on ideas from the Barcelona Long Weekend - thanks to all the people who provided valuable input, especially Tuomas (tigert) for all the hard work. I have created a new set on Flickr with some screenshots of the current development version:

The new UI is not set in stone, and still has some rough edges, so I'd like to receive some feedback on what can be improved.

If you want to test the development version interactively, use Git to checkout git://repo.or.cz/gpodder.git on your device, and then run bin/gpodder --fremantle --verbose inside the checkout to start the development version in debugging mode. Make sure to have the current version of gPodder installed to drag in the required dependencies (alternatively, install the dependencies by hand). As with all development versions, if it breaks (or messes with your downloads/subscriptions), you got to keep the pieces.

Thanks in advance for the feedback :)

Experimental Maemo 5 UI: Alternative Portrait Mode

The usual way to do rotation to portrait mode in Maemo 5 is to set special flags on a window and let the window manager rotate our window and relayout after the switch. It's not as fast as it could be, and task switching (even between two portrait mode apps) is only possible by switching to landscape mode. Apart from that, things like the system menu don't work in portrait mode.

For some applications, an alternative could be to stay in landscape mode and simply rotate widgets without the window manager even knowing...

It's probably best described in a short demo video of how a simple media player could look like (sorry for the sloppy video, forgot my digital camera, so the webcam had to act as a replacement) - have a look, and tell me what you think. (For comparison, have a look at the older Panucci rotation video that uses the "normal" way of going into and leaving portrait mode.)

Experimental Maemo 5 UI: gPodder Episode Actions

With the Long Weekend just a little more than one week away, I though about doing some experiments with gPodder's UI. Some users want a quicker way to play/download/delete episodes instead of opening the shownotes window and using its application menu. Here's one approach I tried out today (I know the icons are pixellated and ugly - please consider them as placeholders):

The idea is that you click on an episode, and instead of opening the shownotes view, you get this selection screen where you can choose to play/download/delete the episode or view the shownotes. Of course there have to be some fancy animations, because that's what all the cool kids do today. Just watch the video on YouTube and tell me what you think in the comments here (especially in terms of non-standard UI and annying animations - seriously ;).

In unrelated news, headphoned 1.4 for N800/N810 has been released and pushed to Maemo Extras with support for Panucci and MPlayer for all your "public transport situation" avoidance needs.

gPodder 2.0 for Diablo is here + Fremantle progress

A new version of gPodder (2.0; "Day of the Tentacle") was released a few days ago, and it has already landed in Extras for both Chinook and Diablo. I wrote about the Maemo 4 UI changes some weeks ago, and you can enjoy them all on your tablets right now.

Tuomas Kuosmanen (tigert) has suggested some UI improvements for the Fremantle version of gPodder, and I'm currently working on implementing those ideas. First of all, there's an all-new front page:

The podcast directory (which allows you to discover new podcasts) which looked ugly previously has also been "Fremantleized", and is very usable now:

I'm still thinking about the best way to implement indicators for new, downloaded and listened episodes, but at least the GtkPaned-based split view is gone now:

The episode list is also quite unspectacular, but you can use the AppMenu to unsubscribe from the podcast (splitting up the UI in so many views automatically makes the AppMenus not so filled - good move!).

You can find some more screenshots depicting the current status of the UI in this Flickr photoset, and expect a new release next week or so.

gPodder on Maemo 4 gets a facelift

I finally got around to redesign parts of the dialogs in gPodder for Maemo 4, because some dialogs were still not really finger-friendly and usable. It's still a work-in-progress, but it looks really slick already and the whole UI is completely finger-friendly.

Let me show you some highlights (gPodder 0.17.0 is the current version available in Maemo Extras and "some old version" is from April 2008):

Pretty icons and slicker UI for the main window (compared to the same window in gPodder 0.17.0 and some old version).

The updated podcast directory dialog allows easy discovery of new content (compared to the same dialog in gPodder 0.17.0 and some old version).

The new episodes dialog shows more text and has finger-friendly rows (compared to the same dialog in gPodder 0.17.0 and some old version).

You will be able to filter the episode view and only show downloaded or unplayed episodes (a new feature!).

The complete set of screenshots can be found on Flickr.

gPodder Maemo 5 UI Preview

While we keep the Diablo packages of gPodder updated, and even improve the UI somewhat, it's also time to think about how to create a good podcatcher UI for the next iteration of Maemo. During the weekend, I've come up with some ideas on how it could look like. Some of the problems have already been fixed in the latest release, watch the video of the new UI here:

You can find a list of things that are already working and things where you could help on the gPodder Fremantle Roadmap, and don't forget to report any bugs you find (both in Diablo and Fremantle) to gPodder @ Maemo Bugs.

Multiplayer NumptyPhysics (on a MT table)

(Again, not really tablet-related, but multiplayer could be ported to tablets eventually. Feel free to skip :)

The multi-touch table version of Tim Edmonds' NumptyPhysics gained support for multi-player modes and multi-touch drawing, dragging and deleting in the last few weeks. You can watch the evaluation video here or below.

New features and play modes include:

• Multi-player cooperative (single token and goal)
• Multi-token single-goal versus game
• Multi-token multi-goal versus game
• Draw multiple strokes at the same time
• Move drawn items with two-finger-drag
• Delete drawn items with three-finger-tap

Lesson learned: You need to get the level design right.

Word count for "multi" in this post: 10.

gPodder 0.15.0 now in Maemo Extras

The latest release of gPodder, a podcast downloader for Maemo has been released today, and packages for it are already available in Maemo Extras for Chinook, Diablo and Fremantle Alpha (..but there is no Extras-Promoter for Fremantle yet?).

Highlights of this release:

• Download resuming between sessions
• Finger-friendly lists using libmokoui2
• Friendly folder and file names for downloaded files
• Finger gestures for the episode list

The finger gestures are very nice and can be used to show episode details or play back episodes. Enable the configuration option maemo_enable_gestures and then swipe left to display shownotes or swipe right over an episode to listen to it.

Get it from Maemo Extras.

Screenshots of gPodder in Fremantle Alpha SDK

As we all know, the Fremantle Alpha SDK has been released, and it features (at least parts of) the new UI. I downloaded the SDK and tried running gPodder inside it, and wanted to show you some pictures so you get an idea how an unmodified Maemo 4 UI looks on Fremantle:

Some other remarks: It seems that images have inverted color. I don't know if this is just a bug or if it's intended to be. Also, Xephyr sometimes crashes, which seems to be related to Clutter, although I do not really know ;) I expecially like how they managed to move the buttons of GTK Dialogs to the right side and stack them. This is a very good decision for the widescreen display, and it also means that one dialog in gPodder fits the screen nicely in Fremantle now that did not (and still does not - my fault ;) on Maemo 4.

See all screenshots at gPodder on Fremantle Alpha SDK on Flickr