2019 Plasma and Usability & Productivity sprint

From 19.6. to 25.6. I attended this year’s combined Plasma and Usability & Productivity sprint in the beautiful city of Valencia.

It was a great opportunity to meet old and new friends, drink beer and sangria on the rooftop and of course do some hacking.

First we discussed about the future development of Plasma, especially the Wayland experience. I was particularly interested in how we can solve the two missing pieces in KDE Connect on Wayland, Keyboard input and clipboard synchronization.

We did not only discuss things but got our hands dirty as well tough. I took the opportunity to work on several components, most of which I haven’t worked on much before:

  • I’ve reworked the system tray settings to be more concise and usable. Furthermore I worked on hiding certain system tray elements when they are not in a useful state, making the system tray less cluttered. I also fixed the appearance of the disk quota icon in the system tray settings and the system tray itself when using a dark theme.
  • After I cleaned the code and polished the export menu I worked on integrating an image annotator in Spectacle. Kudos to Damir Porobic for doing the hard part of it by providing kImageAnnotator.
  • I implemented a more human friendly sort order description in Dolphin.
  • I improved the user experience of Purpose, the framework used for sharing stuff. Cancelling a share doesn’t show an error any more. The share dialogs for KDE Connect and bluetooth got a huge makeover. The share menu now shows ellipsis where semantically appropriate.
  • Next to polishing the menus I implemented sharing via Purpose in Gwenview.

The sprint was generously hosted by Slimbook. Thank you very much for that!

Sprints like this are only possible due to the donations KDE e.V. is getting. Please consider donating if you want us to be able to further improve our software.

KDE Connect and Android

As most of you know KDE Connect has recently been removed from Google Play due to a policy violation with regard to our SMS and telephony features. While the public outcry helped to get it back in with all features remaining this is just yet another example of how new Android policies make it harder for us to maintain the level of quality and features you expect from KDE Connect. Android Oreo forced us to drop support for older Android versions and imposed restrictions on background services which force us to have an annoying persistent notification. It is to be expected that Google will further restrict background services which will impose more problems for us. With each new Android versions new restrictions and problems arise which we have to work around, if possible. For example, the upcoming Android Q imposes restrictions on accessing the phone’s clipboard. It is unclear whether the clipboard sync in it’s current form is feasible on Android Q. Those are just examples of the problems with the direction Android is moving towards.

With Plasma Mobile KDE has been working on an alternative mobile platform for a while now. We now consider Plasma Mobile stable and suitable for everyone to use. Therefore we decided to stop developing KDE Connect for Android and focus on the Plasma Mobile experience. We have removed the app from Google Play and F-Droid as well as removed the public repositories. We are also in contact with Google about removing the active installations from devices.

We hope that this steps contributes to a better mobile experience in the long term beginning today, April 1st 2019.

Creating a Plasma Mobile App 1 – Basic Controls

My last post shows how to create a stub Python/Kirigami app that doesn’t do anything. Time to change that! In this post we’re filling the screen with some controls.

Kirigami Pages

Kirigami apps are typically organized in Pages. Those are the different ‘Screens’ of an app. If you come from the Android world you can think of them as the view part of activities. In our case we want to have an initial page that offers to enter a stop or a destination and opens a new page that shows a list of possible routes. Clicking on one of the list items opens a new page with a detailed view about the connections.

Pages are organized in a pagestack where pages can be pushed and popped. On a phone only the topmost page is shown, whereas on a larger screen (desktop or tablet) multiple pages can be shown next to each other.

A single page on the phone
Two pages next to each other on the desktop

So let’s create some pages! I’m going put each page in its own .qml file and let the name end with Page. Our first version of StartPage.qml looks like this:

import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.4
import org.kde.kirigami 2.0 as Kirigami

Kirigami.Page
{
    title: "Start journey"
}

It produces an empty page with a title. Before we can actually see it we need to add it to the pageStack. Replace the Label {} declaration in main.qml with

pageStack.initialPage: Qt.resolvedUrl("StartPage.qml")

pageStack.initialPage is, well, setting the initial Page of the Page stack. Qt.resolveUrl is converting the relative URL of the QML file into an absolute one. Starting the app gives us an empty page

Time to fill it with some content.

Basic controls

On the start page we need need a way to enter start and destination of our journey as well as the date and time of our travel. For start and destination we are using simple TextFields from QtQuick Controls 2. Note that the older version 1 of QtQuick Controls is still around for the foreseable future, but we want to avoid using that. We’re extending StartPage.qml with our controls

ColumnLayout {
    width: parent.width

    Label {
        text: "From:"
    }
    TextField {
        Layout.fillWidth: true
        placeholderText: "Würzburg..."
    }
    Label {
        text: "To:"
    }
    TextField {
        Layout.fillWidth: true
        placeholderText: "Berlin..."
    }
}

A ColumnLayout is a component that positions its children vertically. We set it to be as wide as its parent, the page. The TextFields shall span the whole width as well. Instead of using the same ‘width: parent.width’ we are using ‘Layout.fillWidth: true’. This property is only available to children of a Layout. The difference to the first way is that all the width that is not already occupied by other elements in the layout is filled.

Next we need some way to enter a departure date and time. Unfortunately I’m not aware of any ready-to-use date and time pickers in QtQuick and Kirigami, so I’ll leave this open for a future post. For the time being two simple placeholder buttons shall be enough. Let’s add them to our ColumnLayout

RowLayout {
    width: parent.width
    Button {
        text: "Pick date"
        Layout.fillWidth: true
    }
    Button {
        text: "Pick time"
        Layout.fillWidth: true
    }
}

Now our app looks like this. Both buttons have the “Layout.fillWidth” property set to true, resulting in each one getting 50% of the space.

The buttons look a bit weird, don’t they? That’s because they are using the built-in QtQuick Controls style. If you are using Plasma you are probably used to the org.kde.desktop style which emulates the active Qt Widgets style. We can force our app to use the org.kde.desktop style by running ‘QT_QUICK_CONTROLS_STYLE=”org.kde.desktop” ./main.py’

Looks closer to what we have on the desktop, doesn’t it? Qt also offers a ‘material’ style that follows Android’s material guidelines

Next we need a way to press “Search”. We could solve that with yet another button, but Kirigami offers another way. Pages in Kirigami can have Actions associated with them. The presentation differes from the phone to the desktop. On the phone actions are displayed on the bottom where they are easily reachable while on the desktop they are displayed in form of a toolbar at the top of the page. Let’s add an action to our page

Kirigami.Page
{
    id: root

    title: "Start journey"

    actions.main: Kirigami.Action {
        icon.name: "search"
        text: "Search"
        onTriggered: pageStack.push(Qt.resolvedUrl("ConnectionsPage.qml"))
    }

    ColumnLayout {

On the phone we get this

while on the desktop we get that

You can force the mobile view on the desktop by setting the QT_QUICK_CONTROLS_MOBILE variable to 1.

Triggering the action pushes ConnectionsPage.qml on the pageStack. Of cource we need to create that one now:

import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.4
import org.kde.kirigami 2.4 as Kirigami

Kirigami.Page
{
    title: "Connections"
}

Right now it’s just an empty page, we’re going to fill it with life in the next post.

You can find the full source code for all posts on Git.

Happy hacking!

Google Summer of Code with KDE Connect

KDE is happy to announce that we will be part of Google Summer of Code 2019. GSoC is a program where students recieve stipends to work on free software for 3 months. Getting paid for open source work, that’s the dream, right?

KDE Connect is participating with 3 interesting projects that also involve other areas of KDE

1. Improving KDE Connect on Windows

KDE Connect builds and runs on Windows, but there are a lot of things that can be improved. This mostly involves the functionality that makes use of notifications. A large part of this task is about improving KNotifications on Windows.

2. An SMS app for Plasma Mobile

Plasma Mobile does not have a functional SMS app yet. We believe that the best way to create one is to reuse the SMS UI we’ve been developing for KDE Connect. We verified that the Plasma Mobile SMS stack is functional on the Nexus 5 (I have no information about other devices). The UI is already running on a phone, what’s missing is a backend that talks to ofono

3. Barcode scanning infrastructure

Scanning a barcode is one of those tasks that comes up in various different apps but the developers don’t want to implement it themselves. For those kind of tasks we have the Purpose framework in KDE. It allows the developer to specify a desired action and let the user choose from available services to fulfil them. E.g. the Share feature in Dolphin is implemented via Purpose. This task is about adding a new action type to Purpose that allows to scan a barcode. Possible implementations could use the local camera or the camera of a device connected via KDE Connect.

If you are interested in doing one of those tasks and have some basic understanding of C++ please contact us on #kdeconnect on Freenode or on Telegram.

The deadline for student applications is April 9th and composing a good application takes some time, so please contact us rather soon.

Please note that we require students to have done some minor work (e.g bug fixes) before starting GSoC. Don’t worry if you don’t have done anything yet, there is still time for it 😉

Happy hacking!

Creating a Plasma Mobile application

From February 4th until February 9th I attended a Plasma Mobile sprint in Berlin, Germany. I met a lot of people that share the vision of an open, privacy-friendly mobile platform. However, we all agree that such a platform can only succeed if there are enough people sharing that vision creating suitable apps for it. There already is a nice amount of mobile-friendly Linux apps, many of them created by the KDE Community, but of course we need more 🙂

One app that is essential for my use case is an app that allows me to check departures and routes for public transport. Since I’m not aware of any existing one I decided to do my own and share my road here. The purpose of this is to be educating for both me and you and to inspire you to create your own mobile-friendly Linux apps.

Like the other KDE mobile apps I’m going to use QML/QtQuick and Kirigami. QML is the declarative UI language from the Qt project. Unlike the older QWidgets it is designed with (embedded) touch systems in mind and thus is ideal for mobile apps. Kirigami is a set of QtQuick components designed for creating convergent mobile/desktop apps.

Unlike other KDE projects I’m not going to use C++ for the business logic. Instead I’m going to use Python, which is now officially supported by Qt. Since my Python skills are fairly basic this will be a fun challenge for me. Therefore take everything I write with a grain of salt and feel free to point out anything that is wrong or can be improved.

This won’t be a 100% complete reference for developing for Plasma Mobile, but I’ll try to cover as many different aspects as fit into the concept of this app. I’ll also try to focus on one aspect/feature/goal per post. Also most of this will not be specific to Plasma Mobile but will work on any desktop or mobile Linux.

So lets get started 🙂

Part 0: Basic application

Before getting started we need to install a few things. First of all we need Python (obviously) and Qt for Python. Qt for Python was formerly known as PySide2. You can install it via ‘pip install pyside2’. Next there is Kirigami. On Ubuntu you can install it via ‘sudo apt install qml-module-org-kde-kirigami2’.

After that we can start coding. The following main.py file is creating an app and loading the UI from a .qml file. The exact details are not too important at this point.

#!/usr/bin/env python3

from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine

if __name__ == "__main__":
    app = QGuiApplication()
    engine = QQmlApplicationEngine()

    context = engine.rootContext()
    engine.load("qml/main.qml")

    if len(engine.rootObjects()) == 0:
        quit()
    app.exec_()

Next we need to define our UI in a QML file. To keep things organized we are going to put our QML files in a qml/ subfolder. Our first main.qml is rather simple

import QtQuick 2.2
import QtQuick.Controls 2.4
import org.kde.kirigami 2.0 as Kirigami

Kirigami.ApplicationWindow
{
    width: 480
    height: 720

    Label {
        text: "Hello world!"
        anchors.centerIn: parent
    }
}

width and height are a bit arbitrary since the window will always be maximized on the phone, but this way we get a somewhat realistic window on the desktop. Executing the python file should result in something like this

In the next post we are going to fill this window with more life using QtQuick and Kirigami components. Stay tuned 🙂

The source code will be available at https://invent.kde.org/nicolasfella/kstraba

KDE Connect – New stuff 0x3

Today we released version 1.10 of the KDE Connect Android app. Therefore it’s time again to share what we’ve been working on.

Targeting Android Oreo

As of this month app updates uploaded to Google Play need to target Android 8. This has several implications. Targeting Oreo comes with an updated Support Library, which forces us to drop support for Android 4.0 and below. According to our Google Play data this will affect approximately 400 users. We are very sorry about that, but these users won’t receive further updates. Furthermore, Android Oreo introduced some restrictions in regard to apps running in the background. In the future in order to be able to run in the background KDE Connect needs to show a persistent notification. The good news is that you can hide the notification. The (slightly) bad news is that we cannot do it by default. To hide the notification you need to long-press it and switch it off. Other notifications from KDE Connect are unaffected by this.

1.10 Changes

These are the main changes of version 1.10. Not mentioned are countless small improvements and under-the-hood changes.

Mouse input now works with the same speed independent from the phones pixel density.

The media controller now allows stopping playback.

Run command supports triggering commands using kdeconnect:// URLs. Useful for integration with NFC tags and 3rd-party apps.

The notification filter allows quickly (de-)selecting all apps.

Several settings scatterd across the UI have been bundled into a single settings screen.

A lot of work has gone into how we handle SMS on the Android side in preparation for something huge. Stay tuned 😉

Other changes

The desktop side has improved as well since my last post.

The windows build of KDE Connect gained support for keyboard input.

The plasmoid gained a couple of additions. In my last update I mentioned that it is possible to run commands from there. It is now also possible to lauch the command setup from there. Furthermore it is now possible to select files to share them from there.

The Linux Mobile App gained many visual improvements and features. It now supports sharing files and controlling the system volume.

If you are using Itinerary you can send booking information from the PC directly to the phone via KDE Connect.

It is now possible to send files directly from Pantheon Files (and other Elementary apps) and Thunar via KDE Connect.

Again, there are countless other improvements that I did not explicitly mention.

A big thanks to all people who contributed to this!

 

KDE Connect on IRC and Matrix.org

Since a few months KDE Connect has a Telegram group to discuss development. Since the over 100 people joined. I did not expect such an interest in it. Few people asked to have this group bridged to an IRC channel since they prefer IRC over Telegram. I’m happy to announce that we finally made this happen. Let’s celebrate the birth of #kdeconnect on Freenode. You can also access it from matrix.org (#freenode_#kdeconnect:matrix.org).

The rest is up to you! If you are interested in contributing to KDE Connect go and share your ideas with us and ask any question you have!