Jump to content

Plasma/Mobile/DevGuide: Difference between revisions

From KDE Community Wiki
Dimkard (talk | contribs)
Bam (talk | contribs)
add Plasma Mobile SDK
 
(8 intermediate revisions by 4 users not shown)
Line 8: Line 8:


For most tasks you will not need an actual mobile device running Plasma Mobile. Moreover, although you may contribute to Plasma Mobile using any kind of linux-based development environment , we strongly suggest to use the Plasma Mobile pre compiled image, since such an environment will make the development much easier and facilitate the testing of your work on a machine that emulates a mobile device.  
For most tasks you will not need an actual mobile device running Plasma Mobile. Moreover, although you may contribute to Plasma Mobile using any kind of linux-based development environment , we strongly suggest to use the Plasma Mobile pre compiled image, since such an environment will make the development much easier and facilitate the testing of your work on a machine that emulates a mobile device.  
== General Linux-based development environment ==
To cross-compile Plasma Mobile system components (such as KWin) and apps for target architecture (ARM) on your PC, you are welcome to use container environment which acts as a Plasma Mobile SDK, as described here:<br>
https://invent.kde.org/butirsky/plasma-mobile-sdk


== Plasma Mobile emulated environment ==
== Plasma Mobile emulated environment ==


=== Get the Plasma Mobile installation image ===
=== Get the Plasma Mobile installation image ===
At first, you have to download the Plasma Mobile [https://www.plasma-mobile.org/get/#desktop installation image]. This image is using the same packages as the Neon based reference rootfs, just compiled for amd64. We will use it to set up our development virtual machine but you may use it to test Plasma Mobile in a non-android intel tablet as well.
At first, you have to download the Plasma Mobile [https://plasma-mobile.org/get/#desktop-devices installation image]. This image is using the same packages as the Neon based reference rootfs, just compiled for amd64. We will use it to set up our development virtual machine but you may use it to test Plasma Mobile in a non-android intel tablet as well.


=== Compile QEMU ===
=== Compile QEMU ===
To proceed to installing, QEMU should be installed. QEMU is a free and open-source hosted hypervisor that performs hardware virtualization. Nevertheless, in many distributions QEMU is not packaged with Virgil 3d support. If your distribution provides such a qemu package you may omit and proceed to just installin QEMU using you distribution's application store.
To proceed to installing, QEMU should be installed. QEMU is a free and open-source hosted hypervisor that performs hardware virtualization. Nevertheless, in many distributions QEMU is not packaged with Virgil 3d support. If your distribution provides such a qemu package you may omit and proceed to just installing QEMU using you distribution's application store.


==== Install Virglrenderer ====
==== Install Virglrenderer ====
Line 21: Line 25:


{{Input|1=<nowiki>
{{Input|1=<nowiki>
sudo apt install meson
git clone git://git.freedesktop.org/git/virglrenderer
git clone git://git.freedesktop.org/git/virglrenderer
cd virglrenderer
cd virglrenderer
./autogen.sh
meson build
make
cd build
sudo make install
ninja install
</nowiki>}}
</nowiki>}}


Line 36: Line 41:


==== Install QEMU  ====
==== Install QEMU  ====
To let out system have access to /usr/local/lib we run:
To let our system have access to /usr/local/lib we run:
{{Input|1=<nowiki>
{{Input|1=<nowiki>
LD_LIBRARY_PATH=/usr/local/lib
LD_LIBRARY_PATH=/usr/local/lib/x86_64-linux-gnu
export LD_LIBRARY_PATH
export LD_LIBRARY_PATH
</nowiki>}}
</nowiki>}}
Line 47: Line 52:
mkdir -p qemu/build
mkdir -p qemu/build
cd qemu/build
cd qemu/build
../configure --target-list=x86_64-softmmu --enable-gtk --with-gtkabi=3.0 --enable-kvm --enable-spice --enable-usb-redir --enable-virglrenderer --enable-opengl
../configure --target-list=x86_64-softmmu --enable-gtk --enable-kvm --enable-spice --enable-usb-redir --enable-virglrenderer --enable-opengl
make
make
sudo make install
sudo make install
Line 64: Line 69:
</nowiki>}}
</nowiki>}}


* Select your language:
Follow Calamares instructions to install our system.
[[Image:plasma-mobile-1.png|440px]]
* Select your time zone:
[[Image:plasma-mobile-2.png|440px]]
* Select your keyboard:
[[Image:plasma-mobile-3.png|440px]]
* Choose the default partitioning scheme:
[[Image:plasma-mobile-4.png|440px]]
* Create the system user:
[[Image:plasma-mobile-5.png|440px]]
* Validate your options:
[[Image:plasma-mobile-6.png|440px]]


Then, installation process will start:
* Select your language
* Select your time zone
* Select your keyboard
* Choose the default partitioning scheme
* Create the system user
* Validate your options


[[Image:plasma-mobile-7.png|440px]]
Then, installation process will start.


When completed,
When completed, shutdown your virtual machine.
 
[[Image:plasma-mobile-8.png|440px]]
 
shutdown your virtual machine.
 
[[Image:plasma-mobile-9.png|440px]]


Since installation has been completed, we no longer need the installation image. So, we will start our ready-to-use workstation executing:
Since installation has been completed, we no longer need the installation image. So, we will start our ready-to-use workstation executing:
Line 93: Line 86:
  /usr/local/bin/qemu-system-x86_64 -vga virtio -display gtk,gl=on -m 2G -enable-kvm -boot order=d -drive file=plamodisk,format=raw
  /usr/local/bin/qemu-system-x86_64 -vga virtio -display gtk,gl=on -m 2G -enable-kvm -boot order=d -drive file=plamodisk,format=raw
</nowiki>}}
</nowiki>}}
[[Image:plasma-mobile-10.png|440px]]


== Mobile device running plasma mobile ==
== Mobile device running plasma mobile ==
Line 147: Line 138:


=== First steps with Plasma Mobile development ===
=== First steps with Plasma Mobile development ===
Now you are familiar with the technologies related with Plasma Mobile, it's time to create our first Plasma Mobile application. Creating a Plasma Mobile application based on Kirigami components is quite easy. Following the below steps we will create a simple Kirigami application in a few minutes.
Now you are familiar with the technologies related with Plasma Mobile, it's time to create our first Plasma Mobile application. Creating a Plasma Mobile application based on Kirigami components is quite easy.
 
To properly build a plasma mobile application, a set of development packages should be installed. When working on a KDE Neon based development environment, we suggest installing:
{{Output|1=<nowiki>git cmake make extra-cmake-modules g++ qt5-qmake qt5-default qtdeclarative5-dev libqt5svg5-dev qtquickcontrols2-5-dev libkf5config-dev kirigami2-dev qtmultimedia5-dev</nowiki>}}
 
Following the below steps we will create a simple Kirigami application in a few minutes.
* Download [https://community.kde.org/File:Hellokirigami.tar.gz hellokirigami] archive
* Download [https://community.kde.org/File:Hellokirigami.tar.gz hellokirigami] archive
* Unzip the archive
* Unzip the archive
Line 186: Line 182:


you have successfully created your first Plasma Mobile application!
you have successfully created your first Plasma Mobile application!
To display the application like it would be displayed on the phone, use:
{{Input|1=<nowiki>
QT_QUICK_CONTROLS_MOBILE=true QT_QUICK_CONTROLS_STYLE=Plasma hellokirigami
</nowiki>}}

Latest revision as of 13:28, 5 February 2023

Plasma Mobile Developer Guide

 
Under Construction
This is a new page, currently under construction!

The development environment needed depends on the specific area of Plasma Mobile you want to contribute. There are three kinds of development environment:

  1. General Linux-based development environment
  2. Plasma Mobile emulated environment
  3. Mobile device running plasma mobile


For most tasks you will not need an actual mobile device running Plasma Mobile. Moreover, although you may contribute to Plasma Mobile using any kind of linux-based development environment , we strongly suggest to use the Plasma Mobile pre compiled image, since such an environment will make the development much easier and facilitate the testing of your work on a machine that emulates a mobile device.

General Linux-based development environment

To cross-compile Plasma Mobile system components (such as KWin) and apps for target architecture (ARM) on your PC, you are welcome to use container environment which acts as a Plasma Mobile SDK, as described here:
https://invent.kde.org/butirsky/plasma-mobile-sdk

Plasma Mobile emulated environment

Get the Plasma Mobile installation image

At first, you have to download the Plasma Mobile installation image. This image is using the same packages as the Neon based reference rootfs, just compiled for amd64. We will use it to set up our development virtual machine but you may use it to test Plasma Mobile in a non-android intel tablet as well.

Compile QEMU

To proceed to installing, QEMU should be installed. QEMU is a free and open-source hosted hypervisor that performs hardware virtualization. Nevertheless, in many distributions QEMU is not packaged with Virgil 3d support. If your distribution provides such a qemu package you may omit and proceed to just installing QEMU using you distribution's application store.

Install Virglrenderer

Virgil is a project that allows the guest operating system to use the capabilities of the host GPU to accelerate 3D rendering. OpenGL support on the guest system -Plasma Mobile virtual machine- is required for executing Calamares, that will enable us to install Plasma Mobile. We can compile Virgil executing the following commands:

sudo apt install meson
git clone git://git.freedesktop.org/git/virglrenderer
cd virglrenderer
meson build
cd build
ninja install

Install build dependencies

Depending on your distribution, dependency package names may vary. In KDE Neon, you may install the packages required to compile QEMU executing:

sudo apt install libgtk-3-dev libspice-server-dev libspice-protocol-dev libusbredirparser-dev build-essential libepoxy-dev libdrm-dev libgbm-dev libx11-dev libpulse-dev libsdl2-dev

Install QEMU

To let our system have access to /usr/local/lib we run:

LD_LIBRARY_PATH=/usr/local/lib/x86_64-linux-gnu
export LD_LIBRARY_PATH

To compile QEMU with the set of options that fit our needs and then install it we execute:

git clone git://git.qemu-project.org/qemu.git
mkdir -p qemu/build
cd qemu/build
../configure --target-list=x86_64-softmmu --enable-gtk --enable-kvm --enable-spice --enable-usb-redir --enable-virglrenderer --enable-opengl
make
sudo make install

Create Virtual Machine

Now, we need to create the Plasma Mobile virtual machine, running:

qemu-img create -f raw plamodisk 40G
/usr/local/bin/qemu-system-x86_64 -boot menu=on -cdrom /path/to/neon-pm-devedition-gitunstable-YYYYMMDD-HHMI-amd64.iso -vga virtio -display gtk,gl=on -m 2G -enable-kvm -boot order=d -drive file=plamodisk,format=raw

Then, we execute Konsole, select a user password and open Calamares running:

passwd
sudo -E calamares

Follow Calamares instructions to install our system.

  • Select your language
  • Select your time zone
  • Select your keyboard
  • Choose the default partitioning scheme
  • Create the system user
  • Validate your options

Then, installation process will start.

When completed, shutdown your virtual machine.

Since installation has been completed, we no longer need the installation image. So, we will start our ready-to-use workstation executing:

 /usr/local/bin/qemu-system-x86_64 -vga virtio -display gtk,gl=on -m 2G -enable-kvm -boot order=d -drive file=plamodisk,format=raw

Mobile device running plasma mobile

Currently, you may run Plasma Mobile on an actual mobile device, either by installing postmarketOS or using Halium as hardware adaption layer.

Using postmarketOS

PostmarketOS is a touch-optimized, pre-configured Alpine Linux-based distribution. Currently, postmarketOS has been ported to many devices. Ensure that your device belongs to the relative list and proceed to installation, following the installation instructions provided by postmarketOS team. When asked during installation, just select “plasma-mobile” as the user interface:

Available user interfaces (5):
* none: No graphical environment
* hildon: (X11) Lightweight GTK+2 UI (optimized for single-touch touchscreens)
* luna: (Wayland) webOS UI, ported from the LuneOS project (Not working yet)
* plasma-mobile: (Wayland) Mobile variant of KDE Plasma, optimized for touchscreen
* weston: (Wayland) Reference compositor (demo, not a phone interface)
* xfce4: (X11) Lightweight GTK+2 desktop (stylus recommended)
User interface [weston]: plasma-mobile

Using Halium

Halium provides the minimal android layer that allows a non-Android graphical environment to interact with the underlying Android kernel and access the hardware. Currently Halium has been ported to many devices. The Plasma Mobile team provides a Neon-based rootfs which can be used along with the Halium builds. This image is based on the dev-unstable branch of KDE Neon, and always ships the latest versions of KDE frameworks, kwin and Plasma Mobile.

To run Plasma Mobile using Halium as hardware adaption layer:

Plasma Mobile application development

Getting involved with Plasma Mobile application environment is a perfect opportunity to familiarize with a set of important technologies:

  • Qt, the cross-platform application framework for creating applications that run on various software and hardware platforms with little or no change in the underlying codebase
  • QML, the UI specification and programming language that allows designers and developers to create applications with fluid transitions and effects, which are quite popular in mobile devices. QML is a declarative language offering a highly readable, declarative, JSON-like syntax with support for imperative JavaScript expressions.
  • Qt Quick, the standard library of types and functionality for QML. It includes, among many others, visual types, interactive types, animations, models and views. A QML application developer can get access this functionality with a single import statement.
  • CMake, the cross-platform set of tools designed to build, test and package software, using a compiler-independent method.
  • Kirigami, a set of QtQuick components, facilitating the easy creation of applications that look and feel great on mobile as well as on desktop devices, following the Kirigami Human Interface Guidelines.

Documentation resources

In this section you will find a set of technical resources that will accompany you during your journey as a Plasma Mobile developer. If you are just starting out with Qt, QML and CMake, you will find here enough detail so as to feel comfortable with the technologies related to Plasma Mobile development. If you are an experienced Qt developer, you can find here valuable resources so as to comply with best practices.

QtQuick and QML

Kirigami

CMake

First steps with Plasma Mobile development

Now you are familiar with the technologies related with Plasma Mobile, it's time to create our first Plasma Mobile application. Creating a Plasma Mobile application based on Kirigami components is quite easy.

To properly build a plasma mobile application, a set of development packages should be installed. When working on a KDE Neon based development environment, we suggest installing:

git cmake make extra-cmake-modules g++ qt5-qmake qt5-default qtdeclarative5-dev libqt5svg5-dev qtquickcontrols2-5-dev libkf5config-dev kirigami2-dev qtmultimedia5-dev

Following the below steps we will create a simple Kirigami application in a few minutes.

  • Download hellokirigami archive
  • Unzip the archive
  • Open src/contents/ui/main.qml
  • Change text:
text:  qsTr("Hello Kirigami")

to

text:  qsTr("Hello Kirigami World")
  • Using Konsole, navigate to hellokirigami folder:
cd hellokirigami
  • Create build folder:
mkdir build
  • Navigate to build folder:
cd build
  • Build and install, executing the below commands:
cmake -DKDE_INSTALL_USE_QT_SYS_PATHS=ON ..
make
sudo make install 
  • Run the application, typing:
hellokirigami

If you can see this image:

you have successfully created your first Plasma Mobile application!

To display the application like it would be displayed on the phone, use:

QT_QUICK_CONTROLS_MOBILE=true QT_QUICK_CONTROLS_STYLE=Plasma hellokirigami