Introduction

Before: Spectacle Desktop works on mobile, but is not usable

Spectacle is a popular screenshot application made by KDE with an impressive range of screenshot options. It uses the screenshot backend of kwin and provides additionally a fallback backend for other window managers, therefore it works on any Linux Distribution, even on mobile Linux systems like plasma mobile.

Unfortunately, the UI of Spectacle is not responsive and can therefore not used with good user experience on plasma mobile. Additionally, it also uses a Qt Widgets Frontend, which provides more desktop-oriented controls.

I propose to create a new user interface suited for mobile, which exposes all on mobile usable features of the desktop version. The user inter interface will be created in qml with KDE's toolkit Kirigami to provide a better mobile experience. A shared frontend, if practical, would be the best option, but would be out of scope for this project. Nevertheless, the UI should be made with responsiveness in mind and should use components, which could be used on the desktop version as well or are already used.

Design

Part of my project was coming up with a design for spectacle mobile. I, therefore, decided to use Figma to create some mockups I could present to the community. In the end, we decided to use the last one with a more breezy style as the community like the design and the usability is good (I just used material as it's easier to create mockups with it).

First Mockup
Final Mockup
Final Mockup

Implementation

Version 1

Features:

Display qml window with the title
Show screenshot in the window in good quality

Challenges:

Set up application engine in right place instead of desktop widget ui
Create C++ qml item to display a pixmap with the right scaling
Create a mobile backend which is connected to the signals from spectacle backend

Version 2

Features:

Add bottom toolbar
Implement fab button which requests a new screenshot

Challenges:

Custom shape of toolbar required own c++ class with paint implementation

Version 3

Features:

Implement configuration popup
Read values from different controls to request the screenshot in the correct way

Challenges:

Capture Mode combo Box uses own model and custom delegate, which displays also shortcuts to teach them the user (I did that for Spectacle desktop already in Qt Widgets and I tried to use the same model also in qml)

Version 4

Features

Clean up qml code, separate main.qml in different qml files, which make logically sense
Use more kirigami components

Result

I showed the current version to the community and got positive feedback from them. They also gave me some tips on better use of Kirigami, which I implemented in version 4, and some tips on how to know whether Spectacle is used on desktop or mobile.

Version 1
Version 2
Version 3
Version 4

To Do

Implement a detection if spectacle runs on desktop or mobile
Add settings to the mobile version, currently, they are ported by other devs to new technology, so I thought I would wait with implementing this feature
Do some clean up on the C++ side

Contact

E-mail: [email protected]
KDE identity username: leon0402
Telegram: https://t.me/Leon_De_Andrade