Posts › Improving Koko (Part 1 of 2)

Koko (or “Photos” as it appears on your system) is a convergent Qt Quick / Kirigami-based image viewer and gallery. Stated plainly, this means it’ll open your images and organise them in useful ways. Koko is a convergent application, with a first-class experience for Plasma Mobile, providing the essential mobile image gallery. The mobile and desktop experiences differ slightly in structure, but share much of the same experience.

Koko’s history is not well-documented: copyright notices go as far back as 2014, and there was work done in 2017 under GSoC. As best as I can tell, it saw its first release in KDE Gear 23.04.

Myself, Noah Davis and several others have been contributing to Koko under the banner of Techpaladin Software, a consultancy specializing in KDE development. Our goal is to bring Koko up to feature parity with the Qt Widgets-based Gwenview, and make it a viable desktop image viewer with the features and performance expected of it.

Koko is also a good case for evaluating Kirigami, the library responsible for much of the structure of KDE’s Qt Quick applications: we can test changes and evaluate what functionalities and improvements are necessary to make it an even better platform for our apps.

In this post, I’ll bring you up to speed on the work we’ve done to polish Koko over the past year, making things easier to use and improving appearance. In Part 2, I’ll discuss the important backend refactoring we did to improve performance and enable some of the polish work.

How Does Koko Work?

Koko’s experience is simple — a sidebar shows locations, and the main page shows content. When you click an image or video in the gallery, it is presented full- screen.

There are other ways to use Koko: When invoked from the command-line with an image (which is the mechanism that “Open With…” uses), it needs to go straight to that image; On Plasma Mobile, the form factor needs to adapt to a more vertical view by having a bottom bar, which shows common locations and a page that shows everything the sidebar does. The location bar is moved to not overlap with page actions to give them room to appear.

This experience was already established when we starting looking at Koko, with some parts of it subtly broken or in need of extra polish to deliver the best user experience.

General

Koko has also had an assortment of performance improvements and fixes. I’ll discuss the former in greater detail in Part 2, and as for fixes, we’ve addressed the following:

• Fixed crashes (e.g. when unbookmarking a folder)
• Fixed opening Koko with arguments
• Fixed mishandling of quotes in paths
• Fixed broken dialogs and drawers
• Pre-load adjacent images to avoid black frames when switching
• Fixed the video player (incomplete Qt 5 porting)
• Fixed image dimensions not accounting for displayed rotation (including new functionality in Qt with greater documentation clarity)

Beyond fixes, recent work by Marco Martin provides a better way for Koko to handle its actions (which are now more numerous). The shortcuts used to trigger them can now be customised, and Ctrl+Alt+I shows a “Find Action” overlay as seen in many of our KXmlGui applications.

This work is not exclusive to Koko, and will eventually benefit the wider ecosystem of Kirigami applications. You can read more about this in a post on Marco’s blog.

Sidebar

Koko’s original sidebar featured the poor title “Filter by”, which did not properly describe its usage. The sidebar shows places, and selecting one opens it in the gallery. It doesn’t filter. We changed this to read “Places”, and adjusted the section headings in the sidebar, as “Places” was already used here for the more common options (home folders, favourites, and trash). We changed it to “General”.

The bottom of the sidebar featured a slider to adjust the size of thumbnails in the gallery page, and to access settings. These are substantially less common actions, and despite being separated, don’t fit in a “Places” sidebar. They don’t relate to the sidebar at all. We moved settings to a menu at the top of the sidebar as in other Kirigami applications, showing general application options, and the slider for thumbnail size was removed. It appears as a setting, but is now also easily controlled in the gallery itself.

Gallery

The gallery page has seen the most substantial work. A redundant margin at the top was removed, and the delegates have been fixed so the text never overflows.

Thanks to model refactoring (discussed in Part 2), we now support sorting media according to name, size, and dates modified, created or accessed. The media presented can be searched according to file name. These actions are presented up-front in the header, with others moved into the menu.

Actions in the gallery page have been completely reworked. As it stood, Koko only supported a limited selection of actions: Select All, Deselect All, Share, Delete, Bookmark (to favourite the folder in the sidebar). These actions are entirely insufficient for file management. With Dolphin as inspiration, we’ve implemented a more full set:

• Favorite (which was previously only in the media view)
• Save As (to copy an image or change file type)
• Open Containing Folder
• Open With
• Copy
• Copy Location
• Print
• Invert Selection

We’ve also provided a context menu, when right clicking an image or selection of images, that also exposes file actions.

The navigator, which shows you which folder you’re looking at and lets you navigate upwards, has been redesigned to be more similar to the one seen in Dolphin. It has a background to separate it from backwards/forwards navigation actions, features friendlier folder names, icons, shows the current location in bold, and is well-behaved when constrained: hiding items and eventually shrinking them.

Another familiar thing borrowed from Dolphin is its relatively new in-line status bar. Like in a web browser’s link tooltip, we show the number of items in a folder in the bottom-left corner.

The content that is shown in the gallery page now uses the same natural sorting that Dolphin does, accounting for groups of digits. This is very important for the file names of photos and screenshots, and makes us more consistent.

Media View

The improvement to actions in the gallery page also apply here — file actions that appear on a selection are present, and our existing actions are plumbed into the action collection infrastructure.

Transparent images are no longer show naively, with the transparent region showing the background colour. Now, we show a checkerboard pattern behind the image, which helps identify which areas are transparent. This can be disabled in Koko’s settings, and the background colour itself can be customised, either black, white or the theme’s default background colour.

The media viewer is now DPI aware, so that an image shown at 100% size is shown such that one pixel in the image is always one display pixel, even if 150% display scaling is in use.

The info sidebar has seen several fixes, with a better ratings component, metadata correctly updating, and a much improved tagging experience done by Noah Davis.

Noah’s also worked hard on bringing Spectacle’s advanced annotation editor to Koko, replacing the older image editor. It provides not only the same great way to annotate images as Spectacle, but also the expected image transformations such as rotating, mirroring, cropping and resizing. This work can be re-used in other KDE apps as well!

A post on Noah’s blog detailing bringing Spectacle’s editor to KQuickImageEditor is coming soon.

More Polish to Come

Whilst we at Techpaladin will be slowing down work on Koko, it’s by no means complete and nor are we stopping. Indeed, we already have plans for further work:

The gallery page, for instance, should provide an easy way to rename and move files (with integrated dragging and dropping involving the sidebar and navigator). Whilst not intended to be a full file manager, we’ve gotten surprisingly close to implementing one, even where past Qt Quick file manager efforts have stalled.

We also have in mind improvements to the appearance and experience of the media viewer. When we started on Koko, we commissioned a fantastic set of designs that we have only so far partially delivered upon. The remaining stuff is tricky for a number of reasons, but we’ll get there.

Finally, Koko has a database that sits quietly in the background and indexes images to power the location, time and tag views. We’d like to make it more configurable, and are working on what needs changing to allow Koko to be a multi-instance application.