Howto: Native KDE Window Decoration mit DecGen

Auch wenn mit KDE4 viele Neuerungen und eine verbesserte Architektur, die auch vor seinen Window Manager KWin nicht halt machen (Stichwort: native Unterstützung von Compiz, SVG-Support), langsam aber unaufhörlich heraufdämmern, wird die 3.*-Reihe noch eine ganze Weile auf vielen Rechnern in Gebrauch sein.

Für diese Fensterdekorationen zu erstellen, war lange Zeit nicht gerade einfach – für Nicht-Programmierer gar nahezu unmöglich, trotz der ein oder zwei Tutorials, welche dazu im Netz kursierten.
Erleichterung kam erst mit deKorator, der Bitmap-basierte Themes ermöglichte, und mit Window Decoration Generator (DecGen) für Pixmap-basierte, native WinDecos. Zum Umgang mit letzterem dient dieses kleine Tutorial.

1. Als erstes laden wir uns DecGen und png2qrgb von dieser Seite , entpacken beide und installieren png2qrgb via ./configure, make und make install.
Anbei werfen wir einen Blick in den Ordner decgen-0.5/images. Dort befinden sich später die einzelnen Fensterelemente als Bilddateien, die wir benötigen werden, um unsere WinDeco zu erstellen. Vorerst finden wir hier allerdings nur ein Beispiel, an dem wir uns orientieren können.
Wir stellen fest, dass es zu jedem Element 2 Dateien gibt: für den Zustand, wo das Fenster aktiviert ist, und wo es gerade inaktiv ist. Desweiteren werden wir uns später genau an die hier verwendeten Dateinamen halten.

2. Als nächstes erstellen wir mit dem Programm unserer Wahl jeweils ein Mockup der WinDeco für alle 3 Zustände der Buttons: normal, hover und pressed.

Mockup CylonMinimal

3. Entsprechend dem Beispielbild (siehe unten) und den Graphiken in decgen-0.5/images ’schneiden‘ wir uns die einzelnen Fensterelemente heraus, wobei wir uns allerdings nicht an die im Beispielordner vorgegebenen Größen halten müssen.

Die Elemente sind:

  • Rand links
  • Ecke unten links
  • Rand unten
  • Ecke unten rechts
  • Rand rechts
  • Titelbar oben links
  • Titelbar (Mitte)
  • Titelbar oben rechts (sie muss in ihrer Breite bzw. Länge alle 3 Buttons aufnehmen können)
  • jeweils jeden der Buttons in allen 3 Zuständen (normal, hover, pressed)

Anmerkung bzgl. abgerundeter Ecken oder Aussparungen: diese werden später mit Hilfe von Masken erstellt. Daher ist es im Moment unerheblich, welche Farbe der später transparente Teil der Graphiken hat.

CylonMinimal - Elemente ausschneiden

4. Unsere ausgeschnittenen Buttons setzen wir nun zu jeweils einer einzigen Graphik zusammen, also z.B. alle Zustände des ‚Schließen‘-Buttons (normal, hover, pressed) nebeneinander zu close_btt.png. Sollen die Buttons später bei nicht aktivem Fenster genauso aussehen, wie bei aktiven, so kopieren wir diese Datei einfach und benennen sie in close_btt_inactive.png um.
Dies tun wir nun entsprechend der vorgegebenen Dateinamen aus decgen-0.5/images für alle Buttons und passen auch die Dateibezeichnungen der anderen Fensterlemente an.
Ist dies alles getan, ersetzen wir die Graphiken in decgen-0.5/images mit unseren eigenen.

CylonMinimal - zusammengefügte Buttons

5. Wir öffnen ein Terminal und wechseln in den Ordner decgen

# cd decgen-0.5

6. Laut Anweisung aus der ‚CREATE‘ im selbigen Ordner führen wir nun transform.sh aus mit:

# ./transform.sh

Anschließend werden wir nach dem Namen unserer WinDeco und nach unserem Namen gefragt. Achtung: beim Namen der WinDeco kein Leerzeichen verwenden, sonst meckert er rum ;). Mit meinen Daten sieht das ganze ungefähr so aus:

No template is ready, I’ll prepare one… done.
Enter the package name of this decoration: cylonminimal
Your name: industrie13

* Preprocessing tree… done.
* Transforming tree (template-0.2 -> cylonminimal-0.1)… done.
* Configuring cylonminimal-0.1 source tree… done.
* Sanitizing the tree… done.
* Idiot-proofing… backup created.

********************************************************************************
Congratulations, you have a native window decoration!
Cylonminimal weighs in at a cool 428K.

Checkout the README and CREATE files for help with the image creation stuff.
********************************************************************************

Jetzt hat er uns einen Verzeichnisbaum mit allen notwendigen Dateien erstellt.
Wenn ich jetzt noch die Beschreibung ändern will, die später im Auswahlmenü der WinDecos erscheint, so kann ich dies mit einem Editor im Verzeichnis kwin in der cylonminimal.desktop tun: Name=CylonMinimal (works13.com).

Bevor wir fortfahren, sollten wir ersteinmal alle Dateien im neuerstellten Verzeichnis ausführbar machen:

# cd cylomnminimal-0.1
# chmod 777 * -R
# cd ../

7. Jetzt erstellen wir die super.h, die Pixmap-Datei aus unseren Graphiken. Aus diesem Grunde hatten wir vorhin png2qrgb installiert.
Wir wechseln also in das Verzeichnis images:

# cd images

und

# ../generate_header.sh
Creating the header… done.

8. Wir wechseln wieder ins Verzeichnis kwin unseres Verzeichnisbaumes

# cd ../cylonminimal-0.1/kwin

und fügen die erstellte super.h in unseren Source-tree ein. Dazu gibt der Autor vor:

# ../../automerge.sh ../../images/super.h

… was bei mir nicht funktioniert hat. Ein ‚bash‘ davor konnte das Problem lösen:

# bash ../../automerge.sh ../../images/super.h

9. Das Terminal können wir jetzt schließen.
Wir gehen in den Ordner kwin und öffnen mit deinem Editor die Datei cylonminimal.h. Ihr ersetzt natürlich den Dateinamen mit dem Namen eurer WinDeco.
Dort könnt ihr ab Zeile 67 Angaben zu den Abständen innerhalb eures Skins machen. Ich werde die einzelnen Angaben jetzt nicht erklären, da jeweils Kommentare im Quelltext dazu verfügbar sind.
Allerdings zur Orientierung, in meinem ‚cylonminimal‘-Skin habe ich folgende Werte benutzt (von oben nach unten): 11, 11, 0, 0, 10, 5, 20.
Nachdem wir die Datei angepasst haben, können wir sie wieder schließen.

10. Nun öffnen wir die Datei cylonminimal.cpp im selben Verzeichnis und gehen zu Zeile 1320.
Dort finden wir die oben schon erwähnten Masken für abgerundete Ecken und Aussparungen.
Als Standard sind dort bereits alle 4 Ecken als abgerundet eingestellt. Möchten wir z.B. nur die oberen beiden abgerundet, so kommentieren wir die unteren beiden Blöcke einfach aus.

Doch wie funktionieren die Masken eigentlich? Schauen wir uns einmal die erste an:

mask -= QRegion( 0, 0, 5, 1 );
mask -= QRegion( 0, 1, 3, 1 );
mask -= QRegion( 0, 2, 2, 1 );
mask -= QRegion( 0, 3, 1, 1 );
mask -= QRegion( 0, 4, 1, 1 );

Die Maske besteht aus 5 Streifen, die je 1 Pixel hoch sind, doch eine unterschiedliche Länge besitzen. Die Werte in den Klammern geben die Startkoordinaten und die Länge und Höhe des Pixelstreifens an –> (X-Koordinate, Y-Koordinate, Breite, Höhe). Der Ursprung des Koordinatensystems befindet sich standardmäßig oben links. Die Maske, die der Block oben beschreibt, würde quasi so aussehen:

* * * * *
* * *
* *
*
*

Wollen wir nun aber für die rechte obere Ecke eine Maske erstellen, wäre es von Vorteil, wenn wir unseren Koordinatenursprung nach rechts oben verschieben könnten und wir mit unserem Pixelstreifen statt nach rechts nach links gehen könnten. Dazu setzen wir vor den ersten Wert in der Klammer jeweils immer ein ‚w -‚, z.B.

mask -= QRegion( w – 5, 0, 5, 1 );

Wollen wir den Ursprung des Koordinatensystems nach unten versetzen und nach oben zählen, so setzen wir vor den zweiten Wert der Klammer ein ‚h -‚, also für rechts unten sähe eine Zeile z.B. so aus:

mask -= QRegion( w – 1, h – 5, 1, 1 );

Für meinen CylonMinimal-Skin brauchte ich eine Aussparung von 1 Pixel Höhe direkt über den Buttons rechts. Sie ist von rechts aus gezählt 92 Pixel vom Rand entfernt und 78 Pixel lang. Die entsprechende Eingabe dazu wäre:

mask -= QRegion( w – 92, 0, 78, 1 );

10. Fertig! Eure native WinDeco ist erstellt – sie muß nur noch installiert werden 😉

# ./configure –prefix=`kde-config –prefix`
# make >/dev/null 2>&1
# make
# make install

Einen Kommentar schreiben