Stylesheets (Skins)

Die Programme der asy - Serie verwenden das GUI Framework Qt5 / Qt6. Ein besonderes Feature von QT ist es, dass das Aussehen der visuellen Objekte (Eingabefelder, Tabellen usw.) durch nachladen von Stylesheets verändert werden kann. Ein Beispiel was damit alles möglich ist zeigen Stylesheets vom VLC, der ja auch mit Qt erstellt wurde.

Im Paket von EasyStream sind einige wenige Stylesheets als Beispieĺe enthalten.
Individuelle Stylesheets die Du selbst erstellt hast kannst du in den Ordner kopieren der auch EasyStream.qss enthält. Sehr wahrscheinlich kannst Du auch Stylesheets von anderen QT Projekten verwenden, sie müssen aber die Endung .qss haben, damit sie in EasyStream auswählbar sind.
Um selbst neue Stylesheets zu erstellen und zu testen ändere bitte direkt die Datei EasyStream.qss.

EasyStream.qss

EasyStream läd beim Start die Datei EasyStream.qss nach, die alle Abweichungen vom Standard-Style enthalten muss. Die Syntax der Styles ist an CSS angelehnt.
Beispiele:

QWidget  { selection-background-color: palette(highlight); 	}
QToolTip  {  background-color: rgb(58,58,58); padding: 6px; color: rgb(200,200,200);	}
QToolButton#noResizePlayerButton { background-color: rgb(158,58,58); }

Eine ausführliche Beschreibung der Qt Styles gibt es auf den Seiten des qt-projects

Kurzinfos

Die visuellen Objekte (Wigdets) sind oft hierarchisch von einander Abhängig. So ist z.B. QToolButton von QWidget abgeleitet. Das bedeutet, dass eine Änderung an der Hintergrundfarbe von QWidget auch Auswirkungen auf die Hintergrundfarbe von QToolButton hat.
Visuelle Objekte werden oft mehrfach verwendet. Es gibt oft viele Buttons in einem Programm, deshalb wird auch in EasyStream mehrfach das Objekt QToolButton verwendet.

Um die Hindergrundfarbe für alle ToolButtons zu ändern:

QToolButton {
 background-color: rgb(100,0,0); 
}

Soll nur ein einzelner Button eine andere Farbe bekommen, so muss dieser zusätzlich über den Namen spezifiziert werden:

QToolButton#PlayerButton{ 
background-color: rgb(100,0,0); 
}

Für die Angabe von Farben können folgende Angaben verwendet werden:

color: red;
color: rgb(255,128,0);  (8-Bit Werte 0-255)
color: palette(highlight); (hier wird aus den Standardfarben von EasyStream ausgewählt).
color: #FF0000; ( Hexadezimale Schreibweise 0 - FF in der Reihenfolge RGB)

Auch Icons der Buttons können nachträglich verädert werden.

QToolButton#tBSetting {
qproperty-icon: url(/home/user/EasyApps/EasyStream/img/account_open.png);
}

Erweiterung QSS

EasyStream erweitert die Qt Stylesheets um einige wenige zusätzliche Features.

$CONF

Absolute Pfadangaben sind nicht von Rechner zu Rechner übertragbar (Windows/Linux....) die haben hier eigentlich nichts zu suchen.
Deshalb gibt es bei EasyStream den Platzhalter $CONF, dabei verweist $CONF auf den Konfigurationsordner von EasyStream in dem auch EasyStream.css zu finden ist.

Aus dem Beispiel von oben mit absoluter Pfadangabe:

qproperty-icon: url(/home/user/EasyApps/EasyStream/img/account_open.png);

wird eine relative Pfadangabe:

qproperty-icon: url($CONF/img/account_open.png);

Farbpalette

Bei Qt sind die Grundfarben, die vom jeweiligen Betriebsystem übernommen werden, in QPalette gespeichert. Die 17 definierten Farben der Palette sind:

"WINDOWTEXT" , "BUTTON" , "LIGHT" , "MIDLIGHT" , "DARK" , "MID" , "TEXT" , "BRIGHTTEXT" , "BUTTONTEXT" , "BASE", "WINDOW" , "SHADOW" , "HIGHLIGHT" , "HIGHLIGHTEDTEXT" , "LINK" , "LINKVISITED" , "ALTERNATEBASE" , " " , "TOOLTIPBASE" , "TOOLTIPTEXT" 

Zusätzlich zu den Qt Stylesheets wie sie in der Dokumentation zu Qt beschrieben sind, kannst Du bei EasyStream im Stylesheet auch die Farben der verwendeten Farbpalette verändern.

Beispiel:

/*
QPalette {
HighLight: #0099FF;
highlightedtext: #Fcf9873ab;
}
*/

Für die Palette werden nur Farbangaben der Form: #RGB .... #RRGGBB .... #RRRRGGGGBBBB in hexadezimaler Schreibweise (Zahlen 0 - F) akzeptiert. Die Groß-Kleinschreibung bei den Farbnamen und den Farbwerten ist beliebig.

Defines

Bei einem umfangreichen Stylesheet wiederholen sich z.B. viele Farbangaben mehrfach. Willst Du diese Farbe nachträglich ändern musst Du die Datei an vielen Zeilen ändern. Aus diesem Grund gibt es bei EasyStream die #define.

/* 
QPalette {
HighLight: #0099FF;
Button: $ICON_BASE;
}
#define ICON_BASE=#282828
#define ICON_HOVER=#630f0f
QToolButton#PlayerButton{ 
   background-color: $ICON_BASE; 
}
*/

Wie in dem Beispiel zu sehen ist muss die #define Zeile nicht unbedingt vor der 1. Verwendung definiert werden.
Diese Defines werden zuerst alle gesammelt und dann von EasyStream in alphabetischer Reihenfolge ersetzt, daraus folgt:

die Definition A_BACKGROUND kann $B_BACKGROUND enthalten
die Definition B_BACKGROUND kann nicht $A_BACKGROUND enthalten, denn das wird danach nicht mehr ersetzt.

EasyStream.list

Gehe zu Einstellungen - nur fürs testen
Ganz unten findet ihr noch den Button: save list of widgets to....
Damit wird eine Liste (EasyStream.list) aller in EasyStream verwendeter visueller Objecte wie z.B. Buttons gespeichert. Diese Liste ist hilfreich, um ein neue Stylesheets für EasyStream zu erstellen.

EasyStream.list enthält eine Aufstellung aller in EasyStream verwendeten visuellen Objekte (Widgets). Jede Zeile enthält dabei den Typ des Objectes z.B. QToolButton und evtl. den internen Namen des Objectes z.B. noResizePlayerButton

Ein Beispielauszug aus EasyStream.list:

QWidget - scrollAreaWidgetContents
QToolTip - 
QToolButton - noResizePlayerButton
QFrame - frameControl